Les tableaux (arrays) constituent un des fondements de JavaScript. On ne peut pas dire qu’ils aient beaucoup évolué dans le temps bien que ES5 ait apporté quelques méthodes pour rendre leur utilisation plus simple. ES6 continue sur la lancée et apporte son lot de nouveautés. On va faire un peu le point dans ce chapitre

Création d’un tableau

Avec ES5 on a deux façons de créer un tableau :

var nombres = [2, 6, 10];
var autresNombres = new Array(5, 23, 9);

Dans les deux cas il faut lister tous les éléments.

ES6 nous offre deux nouvelles façons de créer un tableau

Array.from

La méthode Array.from permet de créer un nouveau tableau à partir d’un objet itérable ou « qui ressemble » à un tableau :

const commeUnTableau = { 0: "Durand", 1: "Louis", length: 2 };

const tableau = Array.from(commeUnTableau);
for (const item of tableau) {
    console.log(item);
}

L’objet commeUnTableau a des éléments indexés et une propriété length.

Il ressemble donc à un tableau mais ne dispose d’aucune des méthodes correspondantes

En le transformant en tableau on peut maintenant le parcourir.

Un autre exemple d’utilisation est celui de l’objet arguments.

L’objet arguments correspond aux arguments passés à une fonction

function f() {
  console.log(Array.from(arguments));  // ["un","deux","trois","quatre"] 
}
f('un', 'deux', 'trois', 'quatre');

On peut ajouter un argument pour effectuer un traitement sur les éléments :

function f() {
  console.log(Array.from(arguments, x => 2 * x));  // [2,4,6] 
}
f(1, 2, 3);

J’ai utilisé une fonction fléchée puisque maintenant vous les connaissez !

Array.of

D’après vous qu’obtenez-vous avec cette déclaration de tableau ?

let tableau = new Array(2);

Voilà le résultat :

console.log(items); //  [null,null]

Vous aviez deviné ?

Lorsqu’on passe juste un argument avec une valeur numérique au constructeur ça donne juste la longueur du tableau.

Et maintenant dans ce cas ?

let tableau = new Array("2");

Cette fois on obtient un tableau avec juste l’élément transmis.

Vous avouerez que c’est quand même un peu confus !

C’est là qu’intervient la nouvelle méthode Array.of :

let tableau = Array.of(2);
console.log(tableau);  // [2]

On se contente de transmettre les éléments qu’on veut dans le tableau.

Les nouvelles méthodes des tableaux

La recherche des éléments

ES5 n’est pas très bien équipé pour faire des recherches dans un tableau. On a bien les méthodes indexOf et lastIndexOf, mais leur action est limitée.

Avec ES6 arrivent les méthodes find et findIndex qui ouvrent de nouvelles possibilités.

La différence entre find et findIndex est que la première renvoie une valeur alors que la seconde renvoie un index, sinon c’est exactement le même fonctionnement.

On doit passer comme argument une fonction de rappel qui effectue un test sur les valeurs du tableau :

let valeur = [1, 3, 2].find(x => x > 2);
let index = [1, 3, 2].findIndex(x => x > 2);
console.log(valeur);  // 3
console.log(index);  // 1

Et quand on ne trouve pas voilà les valeurs retournées :

let valeur = [1, 3, 2].find(x => x > 3);
let index = [1, 3, 2].findIndex(x => x > 3);
console.log(valeur);  // undefined
console.log(index);  // -1

Remplir un tableau

La méthode fill permet de remplacer toutes les valeurs d’un tableau par une certaine valeur. On peut limiter l’action avec un index de départ et un index d’arrivée :

console.log([1, 2, 3].fill(0));         // [0,0,0]
console.log([1, 2, 3].fill(0, 1));      // [1,0,0]
console.log([1, 2, 3].fill(0, 1 , 2));  // [1,0,3]

Copie superficielle

La méthode copyWithin effectue une copie superficielle d’une partie d’un tableau sur lui-même. On dispose de 3 arguments :

• cible : index de début de la copie (peut être négatif),
• début : index de début de la partie à copier (optionnel, peut être négatif),
• fin: index de fin de la partie à copier (optionnel, peut être négatif).

Voici quelques exemples :

console.log([1, 2, 3, 4].copyWithin(-1));        // [1,2,3,1]
console.log([1, 2, 3, 4].copyWithin(2));         // [1,2,1,2]
console.log([1, 2, 3, 4].copyWithin(1, 3));      // [1,4,3,4]
console.log([1, 2, 3, 4].copyWithin(1, 2, 3));   // [1,3,3,4]

En résumé

• Avec ES6 on peut créer un tableau à partir d’un objet itérable ou « qui ressemble » à un tableau avec la méthode Array.from.
• Avec ES6 on peut créer un tableau de manière plus sûre avec la méthode Array.of.
• ES6 introduit les méthodes find et findIndex pour effectuer une recherche dans un tableau avec une fonction de rappel.
• Avec ES6 on peut remplir un tableau avec la méthode fill ou faire une copie superficielle avec la méthode copyWithin.