Contar ciertos elementos de un array en JavaScript

1. Use el método .filter para contar ciertos elementos de un array en JavaScript
2. Utilice el método .reduce para ejecutar una función de devolución de llamada en JavaScript
3. Utilice la entidad Array .prototype para escribir métodos o propiedades personalizados en JavaScript

Al presentar el método .filter que se puede usar literalmente para filtrar elementos de un array en función de una condición, podemos usarlo además de la propiedad .length para contar ciertos elementos de un array. Una función proporciona la condición del método .filter, pasada como parámetro.

Además, presentaremos el método .reduce que ejecuta una función para cada elemento del array y devuelve un solo valor.

La función pasada como parámetro puede ser una función de flecha o una función común como función de devolución de llamada. Dictará qué elementos agregará el .filter al array devuelta o qué hará el método .reduce para cada elemento del array.

Use el método .filter para contar ciertos elementos de un array en JavaScript

El .filter es un método de la entidad Array que devuelve un nuevo array filtrado por la condición proporcionada. Devolver un nuevo array significa que el array original, al que se llama al método, permanecerá inmutable.

Por ejemplo, si queremos que todos los elementos sean iguales al valor one en un array, podemos usar .filter como se muestra a continuación:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element == 'one')
console.log(array)

Producción :

// Output
[ 'one' ]

Como era de esperar, el método .filter devolvió un array basada en la condición element == 'one'. Entonces, si el elemento real del array es igual a 'one', entonces el filtro agregará este elemento al array devuelta.

Pero, ¿qué sucede dentro del método .filter? Podemos ver mejor usando una estructura de función común a la función condition():

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(function condition(element) {
  if (element == 'one') return true
    return false
})
console.log(array)

Con esto, tenemos la misma salida del primer ejemplo:

// Output
[ 'one' ]

La función condition() recibe como parámetro un element, y si ese elemento es igual a un determinado valor, en este caso, 'one', devuelve true y, en caso contrario, devuelve false.

Entonces, el método .filter agrega cualquier element que la condición resulte en true; como el array original tiene solo el primer elemento como one, el .filter devuelve solo un elemento.

Tenga en cuenta que la función condition() se declara dentro del método .filter. Si lo declara fuera y lo llama dentro del filter, no funcionará porque el elemento es parte del alcance de devolución de llamada.

Una función de devolución de llamada se pasa como parámetro a otra función llamada función externa.

La función externa llamará a la función de devolución de llamada para hacer algo; en el caso del método .filter, llamará a la función de devolución de llamada condition() para filtrar el array en función de su condición.

Volviendo a nuestro objetivo, el .filter finalmente devolverá una nueva matriz con elementos array.length, y cada uno es un elemento cuya función de devolución de llamada devolvió un valor equivalente a true. Podemos hacer esto fácilmente con la propiedad .length para contar estos elementos filtrados.

El .length es una propiedad de la entidad de matriz que devuelve la cantidad de elementos en un array. Este número siempre es mayor que el índice más alto de ese array porque el primer elemento siempre está en el índice igual a 0.

// Input
let array = [1, 2, 3, 4, 5]
console.log(array.length)

Producción :

// Output
5

El número de elementos del array es 5. 5 es mayor que el índice del valor 5, que es 4.

Poniendo todo junto, como ejemplo, podemos usar lo siguiente: ¿Cómo obtener el número de todas las notas de prueba de una escuela mayor que siete? La matriz de las notas de prueba está en el ejemplo.

// Input
let notes =
    [7.0, 6.7, 7.3, 9.8, 5.6, 7.1, 7.8, 6.2, 8.0, 9.0, 4.5, 6.9, 7.5, 8.5, 6.4]
greaterThanSeven = notes.filter(value => value > 7)
console.log(greaterThanSeven.length)

Producción :

// Output (The array returned by the .filter is: [7.3, 9.8, 7.1, 7.8, 8, 9, 7.5, 8.5])
8

Entonces, 8 es el número de notas mayor que 7 de las 15 notas del array original notes.

Utilice el método .reduce para ejecutar una función de devolución de llamada en JavaScript

Podemos usar el método de entidad de array .reduce como otra opción. Este método se usa para ejecutar una función de devolución de llamada (y el .filter) en cada elemento del array, pero finalmente devolverá un solo valor.

Un ejemplo simple del funcionamiento .reduce es la suma de todos los elementos en un array:

// Input
let array = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current)
console.log(array)

Producción :

// Output
15

Pero podemos usar este método de otra manera pasando el valor inicial. En el ejemplo anterior, podemos ver que el previous comienzan con el primer elemento de índice en la matriz, siendo la función de devolución de llamada, de esta manera:

/*
previous + current = result
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15 -> final result
*/

Esta suma funciona porque si no pasamos un segundo parámetro (ya que la función de devolución de llamada es el primer parámetro) al método .reduce, considerará el previous como el primer elemento del array en la primera iteración.

¿Pero si queremos contar ciertos elementos del array? No podemos usar el primer elemento como el previous porque podría dar como resultado un valor incorrecto.

El siguiente ejemplo se trata de contar cuántos 2 números hay en el array:

// Input
let array = [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum))
console.log(array)

Producción :

// Output
2

Como vemos, el resultado es 2, pero la respuesta correcta es 1. Ocurrió porque la sum se inicializa con el primer elemento 1, ya que no pasamos ningún otro parámetro más allá de la función de devolución de llamada.

Para hacer la corrección, simplemente podemos pasar un 0 como segundo parámetro .reduce:

// Input
let array =
    [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum), 0)
console.log(array)

Producción :

// Output
1

De esta forma, el .reduce está haciendo suma + 1 cada vez que el elemento actual es igual a 2, con la sum inicializada con 0.

Utilice la entidad Array .prototype para escribir métodos o propiedades personalizados en JavaScript

Como ventaja, en lugar de usar todas estas lógicas cada vez que necesitamos contar ciertos elementos en un array, podemos usar la propiedad de entidad de matriz .prototype para escribir métodos personalizados o propiedades para esta entidad.

Para hacer un método .countCertainElements a la entidad array, podemos usar la siguiente estructura:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.filter(arrayElement => arrayElement == value).length
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Producción :

// Output
3

Podemos hacer lo mismo para el .reduce:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.reduce((sum, element) => (element == value ? sum + 1 : sum), 0)
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Producción :

// Output
3