JavaScript : comment ajouter des éléments à un tableau (push, unshift, splice, concat, spread) — Guide du débutant à l’intermédiaire

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation essentiels pour le développement web. Parmi ses fonctionnalités de base, les tableaux jouent un rôle crucial dans la gestion et la manipulation efficaces des données.

Dans cet article, nous expliquerons en détail comment ajouter des éléments à des tableaux en JavaScript, en couvrant les méthodes spécifiques et leur utilisation. En abordant tout, des méthodes de base aux techniques plus avancées, ce guide sera utile aux débutants comme aux apprenants intermédiaires.

2. Concepts de base des tableaux

Qu’est‑ce qu’un tableau ? — Les bases de la gestion des données

Un tableau JavaScript (Array) est une structure de données qui vous permet de stocker et de gérer plusieurs valeurs ensemble. Il peut contenir différents types de données en tant qu’éléments, tels que des chaînes, des nombres et des objets.

Exemple :

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

Vous pouvez accéder aux éléments du tableau à l’aide d’un indice. Comme les indices commencent à 0, le premier élément peut être récupéré avec fruits[0].

console.log(fruits[0]); // "apple"

Initialisation d’un tableau et opérations de base

Vous pouvez initialiser les tableaux de la manière suivante.

1. Créer un tableau vide :

   let arr = [];
   

2. Créer un tableau avec des valeurs initiales :

   let numbers = [1, 2, 3, 4];
   

3. Écrire un tableau sur plusieurs lignes :

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

Comme opération de base, vous pouvez utiliser la propriété length pour obtenir le nombre d’éléments.

console.log(colors.length); // 3

3. Méthodes de base pour ajouter des éléments à un tableau

3.1 Ajouter à la fin : push()

Qu’est‑ce que push() ?

La méthode push() est la façon la plus simple d’ajouter des éléments à la fin d’un tableau. Elle modifie (mutate) le tableau original et renvoie la nouvelle longueur.

Syntaxe

array.push(element1, element2, ..., elementN);

Exemple

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Exemple : ajouter plusieurs éléments

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Ajouter au début : unshift()

Qu’est‑ce que unshift() ?

La méthode unshift() ajoute des éléments au début d’un tableau. Comme push(), elle modifie le tableau original et renvoie la nouvelle longueur.

Syntaxe

array.unshift(element1, element2, ..., elementN);

Exemple

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 Ajouter à n’importe quelle position : splice()

Qu’est‑ce que splice() ?

La méthode splice() est une option flexible qui vous permet d’ajouter ou de supprimer des éléments à n’importe quelle position dans un tableau.

Syntaxe

array.splice(start, deleteCount, item1, item2, ..., itemN);

Exemple

Ajouter uniquement des éléments :

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

Ajouter et supprimer en même temps :

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Résumé

4. Techniques avancées : fusionner des tableaux et ajouter des éléments

4.1 Fusionner des tableaux : concat()

Qu’est‑ce que concat() ?

La méthode concat() est une méthode non mutante (non destructive) utilisée pour fusionner plusieurs tableaux en un nouveau tableau. Les tableaux originaux ne sont pas modifiés et un nouveau tableau est renvoyé.

Syntaxe

array1.concat(array2, array3, ...);

Exemple

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Fusionner des tableaux avec la syntaxe de propagation (...)

Qu’est‑ce que la syntaxe de propagation ?

La syntaxe de propagation (...) est une fonctionnalité moderne de JavaScript qui étend les éléments des tableaux ou des objets. Elle permet de fusionner des tableaux ou d’ajouter de nouveaux éléments avec un code concis et lisible.

Syntaxe

[...array1, ...array2, ...elements];

Exemple

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Comparaison des Options pour la Fusion de Tableaux

Résumé

Dans cette section, nous avons couvert des techniques avancées pour fusionner des tableaux.

• concat() method : Une façon non mutante de fusionner des tableaux sans changer les originaux.
• Syntaxe de propagation : Une approche moderne et concise pour des opérations flexibles sur les tableaux.

5. Bonnes Pratiques pour une Gestion Efficace des Tableaux

5.1 Méthodes Mutantes vs. Non Mutantes

Quelles Sont les Méthodes Mutantes ?

Ce sont des méthodes qui modifient directement le tableau original.

Quelles Sont les Méthodes Non Mutantes ?

Ce sont des méthodes qui ne changent pas le tableau original et renvoient plutôt un nouveau tableau.

5.2 Écriture de Code Conscient des Performances

Optimisation des Boucles

Boucle efficace :

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Utilisation de la Chaînage de Méthodes

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Amélioration de la Lisibilité du Code

Utiliser des Noms de Variables Clairs

let userIds = [1, 2, 3];

Ajouter des Commentaires de Manière Appropriée

let evenIds = userIds.filter(id => id % 2 === 0);

Utiliser des Littéraux de Modèle

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Résumé

Dans cette section, nous avons introduit des bonnes pratiques pour des opérations efficaces sur les tableaux.

• Choisir entre méthodes mutantes et non mutantes
• Utiliser des boucles conscientes des performances et le chaînage de méthodes
• Améliorer la lisibilité grâce aux noms et aux commentaires

6. Exemples Pratiques et Cas d’Utilisation

6.1 Gestion des Données de Saisie de Formulaire

Scénario : Stocker les Valeurs de Saisie de Formulaire dans un Tableau

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Sortie:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Supprimer un Élément Spécifique du Tableau

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Sortie:

["Sato", "Tanaka"]

6.2 Ajout de Données Dynamiques dans une Application de Gestion de Tâches

Scénario : Ajouter des Tâches et Suivre l’Achèvement

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Sortie:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Gestion de Structures de Données Complexes

Scénario : Travailler avec des Tableaux et Objets Imbriqués

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Sortie:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Résumé

Dans cette section, nous avons expliqué des applications pratiques des opérations sur les tableaux à travers des cas d’utilisation du monde réel.

1. Gestion des données de formulaire – Opérations de base pour ajouter et supprimer des éléments.
2. Création d’une application de gestion de tâches – Gestion dynamique des tableaux et mises à jour de statut.
3. Gestion de structures de données complexes – Ajout et mise à jour d’éléments dans des tableaux et objets imbriqués.

7. Questions fréquemment posées (FAQ)

Q1. Quelle est la façon la plus simple de vider un tableau ?

Réponse : Définissez la propriété length à 0

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

Q2. Comment ajouter uniquement des éléments uniques (sans doublons) ?

Réponse : Utilisez includes() ou Set

Exemple 1 : Vérification des doublons avec includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Exemple 2 : Suppression des doublons avec Set

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. Comment ajouter des éléments à un tableau imbriqué ?

Réponse : Utilisez push() ou la syntaxe de propagation

Exemple 1 : Ajouter un nouveau tableau imbriqué

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

Exemple 2 : Ajouter un élément dans un tableau imbriqué spécifique

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Résumé

8. Résumé final et tableau comparatif

8.1 Résumé global

Opérations de base sur les tableaux

• Qu’est‑ce qu’un tableau ? Une structure qui gère plusieurs valeurs, et vous accédez aux éléments via des index.
• Initialisation et opérations de base Les tableaux sont faciles à créer avec [], et vous pouvez vérifier le nombre d’éléments avec length.

Méthodes d’ajout/suppression d’éléments

• Ajouter à la fin : push() Simple et largement utilisé, mais cela modifie le tableau original.
• Ajouter au début : unshift() Utile lorsque l’ordre compte, mais attention aux performances.
• Ajouter/supprimer à n’importe quelle position : splice() Très flexible, mais la syntaxe peut être un peu complexe.

Fusion et expansion des tableaux

• concat() Une méthode non destructive, sûre pour fusionner plusieurs tableaux.
• Syntaxe de propagation (...) Simple, lisible, et idéale pour les environnements JavaScript modernes.

Conseils d’efficacité

• Méthodes mutantes vs. non mutantes Choisissez des méthodes non mutantes lorsque vous devez préserver les données originales.
• Boucles axées sur la performance Optimisez la vitesse et l’efficacité mémoire lorsque c’est approprié.

Exemples et cas d’utilisation

• Gestion des entrées de formulaire Stockez les valeurs dans un tableau et implémentez facilement l’ajout/suppression.
• Systèmes de gestion de tâches Ajoutez et supprimez des tâches dynamiquement et suivez le statut d’achèvement.
• Opérations sur données imbriquées Gérez de façon flexible les structures complexes avec des tableaux et objets imbriqués.

8.2 Tableau comparatif des méthodes de tableau

Résumé

Dans cet article, nous avons fourni une explication structurée des opérations de tableau en JavaScript, des techniques de base aux techniques avancées.

• Opérations de base sur les tableaux et méthodes d’ajout/suppression d’éléments.
• Techniques avancées comme la fusion et l’expansion de tableaux.
• Cas d’utilisation pratiques et conseils pour une gestion efficace des tableaux.
• Questions courantes et leurs solutions.

Prochaines étapes

Continuez à apprendre JavaScript et renforcez vos compétences en appliquant ces techniques de tableau dans des projets réels !