Compter certains éléments d'un tableau en JavaScript

1. Utiliser la méthode .filter pour compter certains éléments d’un tableau en JavaScript
2. Utiliser la méthode .reduce pour exécuter une fonction de rappel en JavaScript
3. Utilisez l’entité de tableau .prototype pour écrire des méthodes ou des propriétés personnalisées en JavaScript

Présentant la méthode .filter qui peut être utilisée littéralement pour filtrer les éléments d’un tableau en fonction d’une condition, nous pouvons l’utiliser en plus de la propriété .length pour compter certains éléments d’un tableau. Une fonction fournit la condition de la méthode .filter, passée en paramètre.

Aussi, nous introduirons la méthode .reduce qui exécute une fonction pour chaque élément du tableau et retourne une valeur unique.

La fonction passée en paramètre peut être soit une fonction fléchée, soit une fonction commune en tant que fonction de rappel. Il dictera quels éléments le .filter ajoutera au tableau renvoyé ou ce que la méthode .reduce fera pour chaque élément du tableau.

Utiliser la méthode .filter pour compter certains éléments d’un tableau en JavaScript

Le .filter est une méthode de l’entité Array qui renvoie un nouveau tableau filtré par la condition fournie. Le retour d’un nouveau tableau signifie que le tableau d’origine, auquel la méthode est appelée, restera immuable.

Par exemple, si nous voulons que tous les éléments soient égaux à la valeur one dans un tableau, nous pouvons utiliser le .filter comme ci-dessous :

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

Production :

// Output
[ 'one' ]

Comme prévu, la méthode .filter a renvoyé un tableau basé sur la condition element == 'one'. Donc si l’élément réel du tableau est égal à 'one', alors le filtre ajoutera cet élément au tableau retourné.

Mais que se passe-t-il dans la méthode .filter ? On y voit mieux en utilisant une structure de fonction commune à la fonction 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)

Avec cela, nous avons le même premier exemple de sortie :

// Output
[ 'one' ]

La fonction condition() reçoit un element en paramètre, et si cet element est égal à une certaine valeur, en l’occurrence 'one', elle renvoie true et, sinon, renvoie false.

Ainsi, la méthode .filter ajoute tout element que la condition donne true ; comme le tableau d’origine n’a que le premier élément comme one, le .filter ne renvoie qu’un seul élément.

Notez que la fonction condition() est déclarée à l’intérieur de la méthode .filter. Si vous le déclarez à l’extérieur et que vous l’appelez à l’intérieur du filter, cela ne fonctionnera pas car l’élément fait partie de la portée du rappel.

Une fonction callback est passée en paramètre à une autre fonction appelée fonction externe.

La fonction externe appellera la fonction de rappel pour faire quelque chose ; dans le cas de la méthode .filter, il appellera la fonction de rappel condition() pour filtrer le tableau en fonction de sa condition.

Revenons à notre objectif, le .filter renverra finalement un nouveau tableau avec un élément array.length, et chacun est un élément dont la fonction de rappel a renvoyé une valeur équivalente à true. On peut facilement le faire avec la propriété .length pour compter ces éléments filtrés.

Le .length est une propriété de l’entité tableau qui renvoie le nombre d’éléments d’un tableau. Ce nombre est toujours supérieur à l’index le plus élevé de ce tableau car le premier élément est toujours sur l’index égal à 0.

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

Production :

// Output
5

Le nombre d’éléments dans le array est 5. 5 est supérieur à l’indice de la valeur 5, qui est 4.

En mettant tous ensemble, à titre d’exemple, nous pouvons utiliser ce qui suit : Comment obtenir le nombre de toutes les notes de test d’une école supérieure à sept ? Le tableau des notes de test est dans l’exemple.

// 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)

Production :

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

Donc, 8 est le nombre de notes supérieures à 7 parmi les 15 notes du tableau original notes.

Utiliser la méthode .reduce pour exécuter une fonction de rappel en JavaScript

Nous pouvons utiliser la méthode d’entité de tableau .reduce comme autre option. Cette méthode permet d’exécuter une fonction de rappel (et le .filter) sur chaque élément du tableau, mais elle ne renverra finalement qu’une seule valeur.

Un exemple simple du fonctionnement .reduce est la somme de tous les éléments d’un tableau :

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

Production :

// Output
15

Mais nous pouvons utiliser cette méthode d’une autre manière en passant la valeur initiale. Dans l’exemple précédent, nous pouvons voir que le previous commence par le premier élément d’index dans le tableau, étant la fonction de rappel, de cette façon :

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

Cette somme fonctionne car si nous ne passons pas de second paramètre (puisque la fonction de rappel est le premier paramètre) à la méthode .reduce, elle considérera le previous comme le premier élément du tableau à la première itération.

Mais si on veut compter certains éléments du tableau ? Nous ne pouvons pas utiliser le premier élément comme précédent car cela pourrait entraîner une valeur erronée.

L’exemple ci-dessous concerne le comptage du nombre de 2 nombres dans le tableau :

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

Production :

// Output
2

Comme on peut le voir, le résultat est 2, mais la bonne réponse est 1. C’est arrivé parce que la sum est initialisée avec le premier élément 1, car nous ne transmettons aucun autre paramètre au-delà de la fonction de rappel.

Pour faire la correction, il suffit de passer un 0 comme deuxième paramètre .reduce :

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

Production :

// Output
1

Ainsi, le .reduce fait sum + 1 à chaque fois que l’élément courant est égal à 2, avec la sum initialisée à 0.

Utilisez l’entité de tableau .prototype pour écrire des méthodes ou des propriétés personnalisées en JavaScript

De plus, au lieu d’utiliser toutes ces logiques à chaque fois que nous devons compter certains éléments dans un tableau, nous pouvons utiliser la propriété d’entité de tableau .prototype pour écrire des méthodes ou des propriétés personnalisées dans cette entité.

Pour faire une méthode .countCertainElements à l’entité tableau, nous pouvons utiliser la structure suivante :

// 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))

Production :

// Output
3

On peut faire de même pour le .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))

Production :

// Output
3