Ajouter des éléments dans un tableau en JavaScript

1. Utilisez la propriété .length du tableau pour ajouter des éléments dans un tableau en JavaScript
2. Utilisez la méthode push() pour ajouter des éléments dans un tableau en JavaScript
3. Utilisez la méthode unshift() pour ajouter des éléments dans un tableau
4. Utilisez la méthode splice() pour ajouter des éléments dans un tableau
5. Utilisez la méthode concat() pour ajouter des éléments dans un tableau
6. Utilisez la syntaxe spread pour ajouter des éléments dans un tableau

Dans cet article, nous allons apprendre à ajouter des éléments dans un tableau en JavaScript.

Il existe plusieurs méthodes pour ajouter un élément à un tableau en JavaScript. Nous pouvons ajouter un seul élément, plusieurs éléments et même ajouter un tableau entier à un tableau donné. On peut utiliser une méthode selon que l’on souhaite muter ou non, les exigences de rapidité et d’efficacité, la lisibilité du code.

Utilisez la propriété .length du tableau pour ajouter des éléments dans un tableau en JavaScript

C’est l’approche classique dans laquelle nous obtenons le dernier index vide du tableau en utilisant la longueur totale du tableau et insérons un élément à cet index. Cette méthode est la plus simple à utiliser et offre une excellente efficacité. Cela nous permet d’ajouter un seul élément à la fois. C’est une méthode mutative car elle modifie le tableau d’origine.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

Production:

[0, 1, 2, 3]

Dans le code ci-dessus, nous obtenons le dernier index du tableau en utilisant arr.length comme 3 puis ajoutons des éléments à ces index.

Utilisez la méthode push() pour ajouter des éléments dans un tableau en JavaScript

La méthode push() permet d’ajouter des éléments à la fin du tableau. Nous pouvons ajouter un seul élément, plusieurs éléments ou même un tableau. C’est l’option la plus simple et l’une des plus rapides, elle bat même la méthode ci-dessus en utilisant Array.length dans de grands tableaux dans certains cas. Les actions effectuées par push() peuvent être inversées par la méthode .pop(). Lorsque plusieurs éléments sont passés ensemble, leur ordre est conservé par l’opérateur push(). Cette méthode modifie également le tableau, et par conséquent, elle est mutative.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

Production:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Dans le code ci-dessus, nous avons démontré tous les 3 cas: l’ajout d’un seul élément, de plusieurs éléments et même d’un tableau entier en utilisant la syntaxe spread. Tous les éléments sont ajoutés à la fin du tableau.

Utilisez la méthode unshift() pour ajouter des éléments dans un tableau

La méthode unshift() nous aide à ajouter un élément au début du tableau. Il renvoie la nouvelle longueur du tableau. Il peut être appelé ou appliqué à des objets ressemblant à un tableau dans les propriétés. Lorsque plusieurs éléments sont passés ensemble, leur ordre est conservé par l’opérateur unshift(). Cette méthode modifie également le tableau, et par conséquent, elle est mutative.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

Production:

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

Dans le code ci-dessus, nous avons démontré les 3 cas: l’ajout d’un seul élément, de plusieurs éléments et même d’un tableau entier en utilisant la syntaxe spread. Remarquez en quoi cette opération est différente du push(), tous les éléments sont ajoutés au début du tableau.

Utilisez la méthode splice() pour ajouter des éléments dans un tableau

La méthode splice() permet de modifier le contenu du tableau en ajoutant / supprimant des éléments. Il prend les 3 arguments suivants:

1. index: Une valeur entière spécifiant la position pour ajouter / supprimer des éléments. Nous pouvons même spécifier un index à l’arrière du tableau en utilisant des indices négatifs.
2. howmany: C’est un paramètre optionnel. Il spécifie le nombre d’éléments à supprimer du tableau. S’il est réglé sur 0, aucun élément n’est supprimé.
3. item1, item2, ... ,itemx: Les éléments à ajouter au tableau.

Cette méthode modifie également le tableau, et par conséquent, elle est mutative.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

Production:

[1, 2, 3, 4, 7, 8, 9]

Dans le code ci-dessus, nous avons sélectionné l’index 4 et ajouté 3 éléments 7,8,9 à cet index.

Utilisez la méthode concat() pour ajouter des éléments dans un tableau

La méthode concat() prend les tableaux en entrée et les concatène ensemble, c’est-à-dire qu’elle prend un tableau et ajoute le reste à sa fin. Mais cet opérateur ne modifie pas le tableau d’origine et renvoie un tableau entièrement nouveau contenant le résultat combiné. Il peut prendre deux tableaux ou plus et les concaténer. Puisque cette méthode ne modifie pas le tableau donné, elle n’est pas mutative.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

Production:

[1, 2, 3, 8, 9, 10]

Dans le code ci-dessus, nous prenons deux tableaux, arr et arr2, et appelons la fonction concat() pour les concaténer pour former le nouveau tableau - arr3.

Utilisez la syntaxe spread pour ajouter des éléments dans un tableau

Nous pouvons utiliser la syntaxe de propagation pour ajouter des tableaux complets à un tableau donné. C’est une méthode non mutative car nous venons de répartir les éléments du tableau dans un nouveau tableau. C’est très similaire à l’opération concat(). Cela nous aide à créer une copie ou à fusionner deux tableaux séparés. Il est important d’utiliser la syntaxe de diffusion avec soin. Si nous utilisons la syntaxe const arr = [arr1, arr2]; on obtient un tableau imbriqué contenant deux sous-tableaux alors que si on utilise const arr=[...arr1 , ...arr2]; nous concaténons les éléments des deux tableaux ensemble.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

Production:

[1, 2, 3, 8, 9, 10]

Dans le code ci-dessus, nous avons utilisé l’opérateur de diffusion pour ajouter deux tableaux, arr et arr2, dans un nouveau tableau - arr3.

Toutes les méthodes ci-dessus sont prises en charge par tous les principaux navigateurs, à l’exception de la syntaxe de diffusion. Internet Explorer ne prend pas en charge la syntaxe de diffusion.