
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.
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.prototypePour 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 Arraylet 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 videsAccé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 2indexOf() 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 !
