Manipulation de tableaux en Javascript

La compréhension des tableaux est essentielle en développement web, et il est facile d’oublier les fondamentaux. J’ai donc écrit cet article en mode mémento pour retrouver les instructions liées aux tableaux en cas de besoin.

Vincent Bocquet
Jul 28, 2017 · 4 min read

Ici, on va se concentrer sur la manipulation de tableaux classiques. On ne va pas parler de tableaux associatifs avec des combinaisons clé-valeurs, comme on peut retrouver dans d’autres languages. Si vous avez ce besoin, je vous conseille plutôt d’utiliser des objets.

Qu’est-ce qu’un tableau en JavaScript

Rapidement, regardons ce qu’est un tableau en réalité : Un tableau JS est un objet qui hérite de l’objet global standard Array, qui lui même hérite l’objet fondamental Object.

let tableau = new Array;
// tableau > Array.prototype > Object.prototype

Pour une définition plus accessible, on peut dire qu’un tableau contient une liste d’éléments, qu’ils soient du même type ou non.

Créer un tableau

En JavaScript, un tableau vide peut se créer de 2 manières :

let tableau = new Array;
// Ici c'est explicite, on crée une instance de l'objet Array
let tableau = [];
// Mais on peut aussi le déclarer de manière littérale avec []

Bien-sûr, on peut aussi créer des tableaux avec des valeurs initiales :

let tableau = new Array(5, 10, 15, 20);let tableau = ['A', 'B', 'C'];

Il est aussi possible d’initialiser un tableau avec un certain nombre d’éléments vides, il suffit dans ce cas de mettre un entier en paramètre de Array :

let tableau = new Array(3);
console.log(tableau);
// Retourne [undefined × 3] soit un tableau de 3 éléments vides

Accéder aux éléments du tableau

Maintenant que nous avons un tableau, on va avoir besoin de récupérer les éléments dedans. Pour cela, on peut utiliser l’indice. Attention, pour rappel les indices d’un tableau débute à 0 et non à 1 :

let tableau = ['A', 'B', 'C'];
console.log(tableau[1]);
// Retourne 'B'

A l’inverse, on peut avoir besoin de récupérer l’indice à partir de l’élément associé. C’est la méthode indexOf() qui fait cela :

let tableau = ['A', 'B', 'C'];
console.log(tableau.indexOf('C'));
// Retourne 2

indexOf() a l’avantage d’avoir un deuxième paramètre optionnel, qui permet de choisir l’indice à partir duquel on débute la recherche. Par défaut, ce deuxième paramètre est à 0, mais on peut le modifier de cette manière :

let tableau = ['A', 'B', 'C', 'B'];
console.log(tableau.indexOf('B'));
// Retourne 1, l'indice du premier B trouvé
console.log(tableau.indexOf('B', 2));
// Retourne 3, l'indice du premier B trouvé après l'indice 2

Récupérer la taille un tableau

Pour obtenir le nombre d’éléments d’un tableau, c’est très simple, on utilise la propriété length de l’objet Array :

let tableau = ['A', 'B', 'C'];
let nbElements = tableau.length;
console.log(nbElements);
// Retourne 3 (et non 2, ici length compte le nombre d'éléments, il ne se passe pas sur les indices)

Parcourir un tableau

Pour parcourir le contenu d’un tableau, l’objet Array dispose de sa propre méthode de boucle dans son prototype.

Il s’agit de forEach(), et permet d’exécuter une fonction (et donc des instructions) pour chaque élément du tableau. Par exemple :

let tableau = ['A', 'B'];
tableau.forEach(function(element) {
console.log(element);
});
// Retourne :
// 'A';
// 'B';

Vous remarquerez que l’on passe en paramètre de la fonction l’élément, ce qui nous permet de le récupérer et de l’utiliser dans nos instructions.

Ajouter un élément dans un tableau

Si l’on souhaite ajouter un élément, deux possibilités :

let tableau = ['A', 'B'];
tableau[] = 'C';
console.log(tableau);
// La manière littérale, retourne ['A', 'B', 'C']
tableau.push('D');
console.log(tableau);
// La manière objet, Retourne ['A', 'B', 'C', 'D']

Bien sûr, on peut ajouter n’importe quel type d’élément à un tableau : Un nombre, un booléen, une chaîne de caractère, un objet et même un autre tableau. Il n’est pas nécessaire que tous les éléments d’un tableau soient du même type :

let tableau = ['A', 'B'];
tableau.push(22);
console.log(tableau);
// Retourne ['A', 'B', 22];
tableau.push( {id: 1, name: 'Nom'} );
console.log(tableau);
// Retourne ['A', 'B', 22, {id: 1, name: 'Nom'}];

Comme vous le voyez, la méthode push() ajoute notre élément à la fin du tableau. Si vous souhaitez l’ajouter au début, vous pouvez utiliser unshift() :

let tableau = ['A', 'B'];
tableau.unshift(22);
console.log(tableau);
// Retourne [22, 'A', 'B'];

Modifier un élément du tableau

Pour modifier la valeur d’un élément, on peut directement utiliser son indice :

let tableau = ['A', 'B', 'C'];
tableau[1] = 'D';
console.log(tableau);
// Retourne ['A', 'D', 'C'];

Supprimer un élément d’un tableau

Si vous avez besoin de supprimer le dernier élément d’un tableau, pop() est fait pour vous :

let tableau = ['A', 'B', 'C'];
tableau.pop();
console.log(tableau);
// Retourne ['A', 'B'];

Même principe avec shift() pour supprimer le premier élément du tableau :

let tableau = ['A', 'B', 'C'];
tableau.shift();
console.log(tableau);
// Retourne ['B', 'C'];

Trier un tableau

Il existe plusieurs méthodes de Array pour vous permettre de trier vos tableaux. Si vous souhaitez les classer par ordre alphabétique, utilisez sort() :

let tableau = ['E', 'A', 'D'];
tableau.sort();
console.log(tableau);
// Retourne ['A', 'D', 'E']

Si on souhaite simplement retourner le tableau en ayant les derniers éléments en premier, c’est reverse() qu’il faut utiliser :

let tableau = ['A', 'B', 'C'];
tableau.reverse();
console.log(tableau);
// Retourne ['C', 'B', 'A'];

Recherche un élément dans le tableau

Souvent, on a besoin d’un ou plusieurs éléments de notre tableau qui remplissent une condition.

Une première approche est d’utiliser la méthode findIndex() qui permet de remonter l’indice du premier élément de notre tableau qui rempli une condition. Par exemple :

function findC(element) {
return element === 'C';
}
let tableau = ['A', 'B', 'C', 'D', 'C'];
tableau.findIndex(findC);
// Retourne 2, l'indice de notre premier C

Conclusion

Cet article n’est qu’un bref aperçu de ce qu’il est possible de faire avec des tableaux en JavaScript. Je vais sûrement le compléter au fil des semaines en fonction de mes besoins. En espérant qu’il puisse servir à d’autres personnes !

    Vincent Bocquet

    Written by

    Développeur Full-Stack (React, Javascript, PHP, Ruby On Rails, WordPress)

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade