JavaScript : les nouvelles méthodes sur l’objet Array apportées par EcmaScript 5

JavaScript est souvent critiqué concernant la pauvreté de son langage. Mais le langage évolue et rajoute de nouvelles fonctionnalités à chaque version d’EcmaScript. La version 5 apporte pas mal de nouveautés concernant les tableaux (Array). Faisons un peu le tour des nouvelles méthodes disponibles.

indexOf

Cette méthode permet de retourner l’index du premier élément du tableau correspondant à l’objet passé en paramètre. Il retourne -1 si l’objet n’existe pas.

var fruits = ["pomme", "banane", "poire", "pomme"];

fruits.indexOf("pomme"); // 0
fruits.indexOf("kiwi"); // -1

La référence de indexOf sur le MDN

lastIndexOf

Cette méthode permet de retourner l’index du dernier élément du tableau correspondant à l’objet passé en paramètre. Il retourne -1 si l’objet n’existe pas.

var fruits = ["pomme", "banane", "poire", "pomme"];

fruits.lastIndexOf("pomme"); // 3

La référence de lastIndexOf sur le MDN

forEach

La méthode forEach permet d’appeler une fonction pour chaque élément d’un tableau. Cette fonction a 3 paramètres :

  • element : la valeur de l’élément courant
  • index : l’index de l’élément courant
  • array : le tableau lui-même.
function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9

La référence de forEach sur le MDN

every

La méthode every permet de vérifier si une condition est vérifiée par tous les éléments du tableau. Cette condition est exprimée par une fonction qui retourne true ou false.

var arr = [2, 4, 6, 8];
 
arr.every(function (value, index, array) { return value % 2 === 0; }); // true
arr.every(function (value, index, array) { return value % 3 === 0; }); // false

La référence de every sur le MDN

some

La méthode some permet de vérifier si au moins un élément d’un tableau satisfait une condition.

var arr = [2, 4, 6, 8];
 
arr.some(function (value, index, array) { return value % 2 === 1; }); // false
arr.some(function (value, index, array) { return value % 3 === 0; }); // true

La référence de some sur le MDN

map

La méthode map permet de créer un nouveau tableau dont les éléments sont retournés par une fonction appelée sur chaque élément du tableau source.

var numbers = [1, 2, 4];

numbers.map(function (value, index, array) {
  return value + 1;
});
// [2, 3, 5]

La référence de map sur le MDN

filter

La méthode filter permet comme map de créer un nouveau tableau dont les éléments sont filtrés suivant une fonction conditionnelle. Seulement les éléments satisfaisant la condition seront présents dans le tableau résultat.

var numbers = [1, 2, 4];

numbers.filter(function (value, index, array) {
  return value % 2 === 0;
});
// [2, 4]

La référence de filter sur le MDN

reduce

La méthode reduce permet de calculer une valeur à partir des éléments du tableau. La fonction de calcul est appelée pour chaque élément et prend en entrée les paramètres suivants :

  • accum : la valeur courante de la valeur à retourner
  • value : l’élément courant
  • index : l’index de l’élément courant
  • array : le tableau lui même
[1, 2, 3, 4, 5].reduce(function (accum, value, index, array) {
  return accum + value;
});
// 15

Lors de la première itération, accum vaut le premier élément du tableau et value vaut le 2ème élément. Dans notre exemple ci dessus, lors de la première itération, accum vaudra 1 et value 2.

Il est également possible de passer en 2eme paramètre à reduce une valeur initiale. De cette façon, lors de la la première itération, value vaudra 1 et accum la valeur initiale.

["ribery", "valbuena", "lloris", "benzema"].reduce(function (accum, value, index, array) {
  return accum + value.length;
}, 0);
//27

La référence de reduce sur le MDN

reduceRight

La méthode reduceRight fonctionne de la même façon que reduce à l’exception que l’ordre d’appel des éléments du tableau est inversé.

La référence de reduceRight sur le MDN

Polyfill

Bien entendu, ces méthodes étant récentes, celles-ci ne sont pas disponibles dans les navigateurs plus anciens. Si vous devez assurer la compatibilité avec les anciennes versions, il existe des polyfill, qui permettent d’ajouter ces nouvelles méthodes :

Références

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *