Tableaux JavaScript expliqués : bases, opérations et exemples pratiques

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

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

1. Introduction

Qu’est‑ce que les tableaux JavaScript et pourquoi sont‑ils importants ?

Les tableaux JavaScript sont l’un des éléments essentiels pour gérer et manipuler les données de manière efficace. En utilisant des tableaux, vous pouvez stocker plusieurs valeurs dans une même variable et les récupérer ou les modifier selon les besoins.

Par exemple, les tableaux sont extrêmement utiles pour stocker des listes de noms d’utilisateurs, des catalogues de produits ou des résultats de calculs. Dans le développement d’applications web, les tableaux sont fréquemment employés lors du traitement des données de formulaires ou des données récupérées via des API.

Cas d’utilisation pratiques des tableaux

• Gestion de listes : gestion des articles d’un panier d’achat ou de listes de tâches.
• Filtrage de données : recherches d’utilisateurs et fonctionnalités de tri.
• Gestion d’animations : contrôle de l’ordre des éléments et mises à jour dynamiques.

De cette façon, les tableaux constituent une structure fondamentale pour manipuler des données groupées et constituent un sujet indispensable lors de l’apprentissage de JavaScript.

Ce que vous apprendrez dans cet article

Cet article explique systématiquement les tableaux JavaScript à travers les sujets suivants :

1. Comment déclarer et initialiser des tableaux
2. Ajouter, supprimer et récupérer des éléments
3. Techniques de tri et de filtrage
4. Méthodes de fusion et de division de tableaux
5. Exemples d’applications pratiques utilisant les tableaux

Le contenu est conçu à la fois pour les débutants et les apprenants intermédiaires, couvrant soigneusement tout, des opérations de base aux techniques avancées.

Public cible

• Débutants : ceux qui manipulent les tableaux pour la première fois.
• Développeurs intermédiaires : ceux qui souhaitent approfondir les opérations de tableau plus avancées et plus efficaces.

Avec des exemples de code et des cas d’utilisation concrets, même les débutants peuvent apprendre en toute confiance.

Ce que vous pouvez accomplir en maîtrisant les tableaux

En maîtrisant les tableaux JavaScript, vous développerez les compétences suivantes :

• Gestion et manipulation de données : ajouter, supprimer et trier des données facilement.
• Intégration d’API : traiter et afficher efficacement les données récupérées depuis des API web.
• Développement d’applications : créer des applications simples à partir d’exemples pratiques.

Utilisez les connaissances acquises ici pour créer des programmes plus avancés avec JavaScript.

2. Bases des tableaux : déclaration et initialisation

2.1 Définition et rôle des tableaux

En JavaScript, un tableau est un objet spécial qui vous permet de gérer plusieurs valeurs simultanément. Chaque élément possède un ordre (indice), ce qui facilite la récupération et la manipulation des données.

Principaux rôles des tableaux

1. Gestion de listes : organisation de listes de produits ou d’informations utilisateur.
2. Manipulation de données : traitement efficace tel que le tri et la recherche.
3. Gestion dynamique des données : transformation et traitement des données récupérées via des API.

Caractéristiques des tableaux

• Les indices commencent à 0.
• Des éléments de types de données différents peuvent coexister dans le même tableau.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Déclaration et initialisation des tableaux

Déclaration de base d’un tableau

En JavaScript, les tableaux peuvent être déclarés à l’aide des deux méthodes suivantes.

1. Utilisation de littéraux de tableau (recommandé)

   let fruits = ["apple", "banana", "grape"];
   

2. Utilisation du constructeur Array

   let fruits = new Array("apple", "banana", "grape");
   

Création d’un tableau vide

let emptyArray = [];

2.3 Déclaration de tableaux multidimensionnels

Un tableau multidimensionnel stocke des tableaux à l’intérieur d’un tableau. Il est utile pour gérer des structures de données hiérarchiques.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Points importants lors de l’initialisation des tableaux

Mélange de types de données

Comme les tableaux JavaScript peuvent contenir différents types de données, cela peut entraîner des erreurs inattendues si ce n’est pas géré avec soin.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Exemples d’opérations de base sur les tableaux

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

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Résumé

Dans cette section, nous avons couvert les sujets suivants liés aux tableaux JavaScript :

1. La définition et le rôle des tableaux
2. La syntaxe de base pour la déclaration et l’initialisation
3. Les tableaux multidimensionnels et l’indexation
4. Considérations importantes et exemples de code pratiques

En maîtrisant ces fondamentaux, vous pourrez passer en douceur à l’étape suivante : les opérations de base sur les tableaux.

3. Opérations de base sur les tableaux : ajouter, supprimer et récupérer

3.1 Comment ajouter des éléments

Ajouter un élément à la fin – push()

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

Ajouter un élément au début – unshift()

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

3.2 Comment supprimer des éléments

Supprimer un élément de la fin – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Supprimer un élément du début – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Supprimer des éléments à n’importe quelle position – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Comment récupérer des éléments

Récupérer par indice

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Obtenir le dernier élément d’un tableau

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Récupérer un élément qui correspond à une condition – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Résumé

Dans cette section, nous avons couvert les points clés suivants concernant les opérations sur les tableaux JavaScript :

1. Comment ajouter des éléments (push() et unshift())
2. Comment supprimer des éléments (pop(), shift() et splice())
3. Comment récupérer des éléments (accès par indice, find() et includes())

En combinant ces opérations de base, vous pouvez manipuler les tableaux librement et efficacement.

4. Tri et filtrage des tableaux

4.1 Comment trier les tableaux

Trier par ordre croissant/décroissant – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Inverser l’ordre – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Comment filtrer les tableaux

Extraire les éléments qui correspondent à une condition – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Obtenir le premier élément qui correspond à une condition – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Obtenir l’indice du premier élément correspondant – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Résumé

Dans cette section, nous avons expliqué en détail comment trier et filtrer les tableaux JavaScript.

1. Tri : contrôler l’ordre avec sort() et reverse().
2. Filtrage : utiliser filter() pour extraire uniquement les éléments qui remplissent une condition.
3. Recherche : trouver des éléments spécifiques avec find() et findIndex().

5. Fusion, division et transformation des tableaux

5.1 Comment fusionner des tableaux

Fusionner des tableaux – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Fusion avec la syntaxe de propagation

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Comment diviser des tableaux

Extraire une portion – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Supprimer ou remplacer des éléments – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Comment transformer des tableaux

Convertir un tableau en chaîne – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Convertir une chaîne en tableau – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Aplatir un tableau multidimensionnel – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Résumé

Dans cette section, nous avons exploré les méthodes de fusion, de division et de transformation des tableaux JavaScript.

1. Fusionner des tableaux en utilisant concat() et la syntaxe de propagation.
2. Diviser des tableaux avec slice() et les modifier en utilisant splice().
3. Transformer des tableaux et des chaînes avec join() et split().
4. Aplatir des tableaux imbriqués en utilisant flat().

6. Parcourir les tableaux et techniques avancées

6.1 Méthodes de parcours de tableau

Parcours de base avec une instruction for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Parcours concis avec for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Parcours avec forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Générer un nouveau tableau avec map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Techniques avancées

Suppression des éléments dupliqués

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Aplatir un tableau – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Résumé

Dans cette section, nous avons couvert les techniques de parcours et l’utilisation avancée des tableaux.

1. Boucles de base utilisant for et for...of.
2. Traitement efficace et création de tableaux avec forEach() et map().
3. Techniques avancées telles que la suppression des doublons et l’aplatissement des tableaux.

7. Exemple pratique : créer une application simple avec des tableaux

7.1 Création d’une application de liste de tâches

Aperçu des fonctionnalités

Cette application est une simple liste de tâches avec les fonctionnalités suivantes :

1. Ajouter de nouvelles tâches.
2. Supprimer les tâches terminées.
3. Afficher la liste actuelle des tâches.

Exemple de code

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

javascript // Fonction pour supprimer une tâche function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Supprimé : ${removed[0]}); displayTasks(); } else { console.log(« Indice invalide »); } }

// Fonction pour afficher les tâches actuelles function displayTasks() { console.log(« Tâches actuelles : »); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Exécution du test addTask(« Étudier JavaScript »); addTask(« Créer une liste de courses »); addTask(« Vérifier les e‑mails »);

removeTask(1); // Supprimer la deuxième tâche

### Sample Output

Ajouté : Étudier JavaScript Ajouté : Créer une liste de courses Ajouté : Vérifier les e‑mails Tâches actuelles : 1: Étudier JavaScript 2: Créer une liste de courses 3: Vérifier les e‑mails Supprimé : Créer une liste de courses Tâches actuelles : 1: Étudier JavaScript 2: Vérifier les e‑mails

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:



1. **Data management and presentation** : Filtering API data and displaying it in tables.
2. **Form and user input handling** : Dynamically managing lists and processing inputs.
3. **Search and sorting features** : Efficiently handling large datasets.
4. **Application development fundamentals** : Building UI components such as shopping carts and task management systems.



### 8.3 Next Steps in Learning



#### 1. Further Use of Array Methods



* **Suggested challenge** : Build an application that displays and filters API data using array operations.



#### 2. Comparing and Choosing Other Data Structures



* Learn **Objects** , **Set** , and **Map** to choose the right structure for each use case.



#### 3. Practical Use in JavaScript Frameworks



* Apply these skills in frameworks such as React or Vue.js.



### 8.4 Reference Links and Resources



* **MDN Web Docs: Array Object**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
* **JavaScript.info: Arrays and Methods**  <https://javascript.info/>



### 8.5 Final Advice for Readers

Les opérations sur les tableaux JavaScript sont essentielles pour bâtir une base solide en programmation. Cet article vous a guidé à travers les techniques fondamentales et avancées.

Conseils

1. Pratiquez concrètement : Écrivez et testez du code pour renforcer votre compréhension.
2. Développez vos compétences en résolution de problèmes : Traduisez des problèmes du monde réel en code.
3. Engagez-vous dans un apprentissage continu : Restez à jour avec les techniques et frameworks modernes.

Passez à l’étape suivante !

Utilisez cet article comme base et continuez à créer des applications plus avancées et à apprendre les frameworks modernes.

FAQ : Questions fréquentes

Q1. Quelle est la différence entre map() et forEach() ?

• map() : Retourne un nouveau tableau. Il applique une transformation à chaque élément et collecte les résultats.
• forEach() : Ne retourne pas de nouveau tableau et exécute simplement une fonction pour chaque élément.

Exemple :

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Comment trier correctement les nombres ?

La méthode sort() compare les éléments comme des chaînes par défaut. Pour trier correctement les nombres, vous devez fournir une fonction de comparaison.

Exemple :

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Comment supprimer les éléments dupliqués d’un tableau ?

Vous pouvez facilement supprimer les doublons en utilisant l’objet Set.

Exemple :

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Comment vérifier si un élément existe dans un tableau ?

Utilisez la méthode includes() pour déterminer si un élément spécifique existe dans un tableau.

Exemple :

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Comment convertir un tableau multidimensionnel en un tableau unidimensionnel ?

Utilisez la méthode flat() pour aplatir les tableaux imbriqués.

Exemple :

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]