ES5 a apporté de nouvelles méthodes à l’objet Array que j’avais abordés dans un article précédent. La nouvelle version ES2015 (anciennement ES6) apportent également quelques nouveautés que nous allons voir.
Array.prototype.find
La méthode find() permet de retourner le premier élément d’un tableau respectant une condition via une fonction passée en paramètre. Si aucun element ne satisfait le critère, undefined est retourné.
const numbers = [1, 2, 3, 4, 5, 6];
let estPair = function (n) {
return n % 2 === 0;
};
let firstEven = numbers.find(estPair); //2
La documentation sur MDN
Array.prototype.findIndex
findIndex() est identique a find à la différence qu’elle retourne l’index du premier élément à la place de l’élément lui même. Si aucun element ne satisfait le critère, -1 est retourné.
const numbers = [1, 2, 3, 4, 5, 6];
let estPair = function (n) {
return n % 2 === 0;
};
let firstEvenIndex = numbers.findIndex(estPair); //1
La documentation sur MDN
Array.prototype.entries
La méthode entries() retourne un nouvel itérateur (Array Iterator) qui contient les clés/valeurs pour chaque index du tableau.
const arr = ['a', 'b', 'c'];
for (let item of arr) {
console.log(item); // => 'a' 'b' 'c'
}
for (let pair of arr.entries()) {
console.log(pair); // => [0, 'a'] [1, 'b'] [2, 'c']
}
La documentation sur MDN
keys
La méthode keys() retourne un nouvel itérateur (Array Iterator) contenant les clés pour chaque index du tableau.
const arr = [1, 2, 3];
const arrIterator = arr.keys();
let nextVal
while (nextVal = arrIterator.next().value) {
console.log(nextVal);
}
// => 1
// => 2
// => 3
La documentation sur MDN
Array.of
La méthode (statique) Array.of() créé une nouvelle instance d’un tableau contenant les valeurs passés en paramètres, quelque soit le type ou le nombre de paramètres.
Array.of(1); // => [1] Array.of(1,2,3); // => [1,2,3]
La documentation sur MDN
Array.from
La méthode (statique) Array.from() créé une nouvelle instance d’un tableau à partir d’un objet assimilés à un tableau array-like (comme arguments ou des noeuds du DOM) ou d’un objet iterable.
On peut utiliser Array.from() depuis arguments, des éléments du DOM, Map, Set, String…
// Array-like object (arguments) to Array
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo");
// ["f", "o", "o"]
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
// Generate a sequence of numbers
Array.from({length: 5}, (v, k) => k);
// [0, 1, 2, 3, 4]
La documentation sur MDN
ES7 / ES2016
La version 7 ou 2016 devrait également apportés d’autres nouveautés (encore en cours de validation …).
- Array.prototype.includes() : retourne un booleen indiquant un élément esyt contenu dans du tableau.
- Array.unobserve() et Array.unobserve(): fonctionne de la même façon que pour Object.observe (et Object.unobserve) pour observer les modifications effectuées sur le tableau.
Liens
La page MDN sur l’objet Array
Une présentation sur l’utilisation des tableaux et objets : Working with Arrays and Objects in modern JavaScript (les slides) et la vidéo :
Il existe des polyfills pour ces méthodes. Vous pouvez également utiliser underscore ou lodash qui propose ses méthodes depuis un moment et bien d’autres .. (la documentation concernant les Arrays de underscore).
Tweet
