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