Contar ciertos elementos de un array en JavaScript
-
Use el método
.filter
para contar ciertos elementos de un array en JavaScript -
Utilice el método
.reduce
para ejecutar una función de devolución de llamada en JavaScript -
Utilice la entidad Array
.prototype
para escribir métodos o propiedades personalizados en JavaScript
![Contar ciertos elementos de un array en JavaScript](/img/JavaScript/feature-image---count-certain-elements-of-an-array-in-javascript.webp)
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