Maîtriser les tableaux JavaScript : guide complet de la création, de la manipulation, du filtrage et des applications 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 façon 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 enregistrer une liste d’identifiants, un catalogue de produits ou des résultats de calculs. Surtout dans le développement d’applications web, les tableaux sont fréquemment employés lors du traitement de données de formulaires ou de 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 d’une liste de tâches.
• Filtrage de données : recherche d’utilisateurs et fonctions de tri.
• Contrôle d’animation : gestion de l’ordre des éléments ou de changements dynamiques.

Les tableaux constituent une structure de base pour manipuler des ensembles de données et représentent un sujet incontournable lors de l’apprentissage de JavaScript.

Ce que vous apprendrez dans cet article

Cet article explique systématiquement les tableaux JavaScript, en abordant les points suivants :

1. Comment déclarer et initialiser des tableaux
2. Comment 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 utilisant des tableaux

Le contenu convient aux débutants comme aux apprenants intermédiaires et explique soigneusement tout, des bases aux techniques pratiques.

À qui s’adresse cet article

• Débutants : ceux qui manipulent les tableaux pour la première fois.
• Utilisateurs intermédiaires : ceux qui souhaitent apprendre des opérations avancées ou écrire du code plus performant.

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

Ce que vous pourrez accomplir en maîtrisant les tableaux

Une fois que vous maîtriserez les tableaux JavaScript, vous développerez les compétences suivantes :

• Gestion et manipulation de données : ajouter, supprimer ou trier des données facilement.
• Intégration d’API : gérer et afficher efficacement les données récupérées depuis des API Web.
• Développement d’applications : créer des applications simples en vous appuyant sur des exemples pratiques.

Utilisez ce que vous apprenez ici pour créer des applications JavaScript plus avancées.

2. Bases des tableaux | Déclaration et initialisation

2.1 Définition et rôle des tableaux

Les tableaux JavaScript sont des objets spéciaux qui vous permettent de gérer plusieurs éléments de données à la fois. Chaque élément possède un indice qui détermine sa position, ce qui rend la récupération et la manipulation des données simples.

Principaux rôles des tableaux

1. Gestion de listes : gestion de données groupées comme des catalogues de produits ou des informations d’utilisateurs.
2. Manipulation de données : réalisation de tâches efficaces telles que le tri ou la recherche.
3. Traitement dynamique des données : gestion et transformation des données récupérées via des API.

Caractéristiques des tableaux

• Les indices des éléments commencent à 0.
• Des valeurs de types de données différents peuvent être stockées ensemble.

  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 de deux manières :

1. En utilisant la notation littérale (recommandée)

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

2. En utilisant le 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 est un tableau qui contient d’autres tableaux. 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 Notes sur l’initialisation

Mélange de types de données

Les tableaux JavaScript peuvent stocker des valeurs de différents types de données, ce qui peut entraîner des erreurs inattendues si ce n’est pas géré correctement.

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é

Cette section a expliqué les concepts suivants concernant les tableaux JavaScript :

1. Définition et rôles des tableaux
2. Syntaxe de base pour la déclaration et l’initialisation
3. Tableaux multidimensionnels et gestion de la longueur
4. Considérations importantes lors de l’initialisation avec des exemples de code

Avec ces connaissances, vous serez mieux préparé pour l’étape suivante : « Opérations de base sur les tableaux ».

3. Opérations de base sur les tableaux | Ajout, suppression et récupération d’éléments

3.1 Méthodes d’ajout d’éléments

Ajouter des éléments à la fin – push()

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

Ajouter des éléments au début – unshift()

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

3.2 Méthodes de suppression d’éléments

Supprimer le dernier élément – pop()

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

Supprimer le premier élément – 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 Méthodes de récupération d’éléments

Récupérer par indice

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

Récupérer le dernier élément

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

Récupérer le premier élément correspondant – 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 expliqué les opérations suivantes sur les tableaux JavaScript :

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

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

4. Tri et filtrage des tableaux

4.1 Méthodes de tri des tableaux

Trier en ordre croissant ou 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 Méthodes de filtrage des 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]

Récupérer 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é

Cette section a expliqué comment trier et filtrer les tableaux en JavaScript :

1. Tri : Utilisation de sort() et reverse() pour contrôler l’ordre.
2. Filtrage : Utilisation de filter() pour extraire les éléments correspondants.
3. Recherche : Utilisation de find() et findIndex() pour localiser les éléments.

5. Fusion, division et transformation des tableaux

5.1 Méthodes de fusion 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"]

Concaténer en utilisant la syntaxe spread

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

5.2 Méthodes pour diviser les 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 Méthodes pour transformer les 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é

Cette section a expliqué diverses méthodes de tableaux JavaScript pour concaténer, diviser et transformer les tableaux :

1. Concaténation de tableaux : concat() et la syntaxe spread
2. Division de tableaux : slice() pour l’extraction et splice() pour la suppression ou le remplacement
3. Transformation de tableaux : join() et split() pour la conversion en chaîne
4. Aplatissement : flat() pour convertir les tableaux imbriqués en une dimension unique

6. Boucler sur les tableaux et techniques avancées

6.1 Méthodes pour boucler sur les tableaux

Boucle de base avec for

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

Boucle simplifiée avec for...of

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

Boucler avec la méthode forEach()

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

Créer 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

Supprimer les é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é

Cette section a expliqué les méthodes de boucle de tableau et les techniques avancées :

1. Boucles de base : itération efficace avec for et for...of.
2. Boucles basées sur des méthodes : utilisation de forEach() et map() pour un traitement plus propre et fonctionnel.
3. Manipulation avancée des données : suppression des doublons et aplatissement des tableaux imbriqués.

7. Exemple pratique | Construire une application simple en utilisant des tableaux

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

Aperçu des fonctionnalités

Cette application de liste de tâches simple comprend 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();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Exemple de sortie

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Résumé

Cette section a présenté une application pratique utilisant les opérations sur les tableaux :

1. Application de liste de tâches : Pratique de l’ajout, de la suppression et de l’affichage des tâches.
2. Recherche et analyse de données : Démonstration de la mise en œuvre d’une recherche flexible et de l’agrégation de données à l’aide d’opérations sur les tableaux.

8. Résumé | Maîtriser les opérations sur les tableaux

Les tableaux JavaScript sont des outils puissants qui aident à rationaliser la gestion et la manipulation des données. Cet article a couvert tout, des opérations de base aux techniques avancées et aux exemples pratiques.

8.1 Revue de cet article

1. Opérations de base sur les tableaux

• Déclaration et initialisation : Apprentissage de la création de tableaux et de la gestion des tableaux multidimensionnels.
• Ajout, suppression et récupération d’éléments : Pratique de la manipulation dynamique des données à l’aide de méthodes comme push(), pop() et d’autres.

2. Tri et filtrage des tableaux

• Tri : Explication de la modification de l’ordre des tableaux à l’aide de sort() et reverse().
• Filtrage : Apprentissage de l’extraction de données à l’aide de filter() et find().

3. Fusion, division et transformation des tableaux

• Fusion : Compréhension de la fusion des tableaux à l’aide de concat() et de la syntaxe de propagation.
• Division et transformation : Utilisation de slice(), splice(), join() et split() pour une gestion flexible des données.

4. Bouclage et techniques avancées

• Bouclage : Utilisation de for, forEach() et map() pour une itération efficace.
• Techniques avancées : Apprentissage de la suppression des doublons et de l’aplatissement des tableaux imbriqués.

5. Exemples pratiques

• Application de liste de tâches : Application des opérations sur les tableaux pour créer une application fonctionnelle.
• Recherche et agrégation de données : Démonstration du filtrage et de l’analyse pratiques des données.

8.2 Importance des opérations sur les tableaux et cas d’utilisation

Pourquoi les opérations sur les tableaux sont-elles importantes ?

La manipulation des tableaux est essentielle pour organiser, analyser et afficher les données. Les scénarios courants incluent :

1. Gestion et affichage des données : Filtrage des données d’API et affichage des résultats dans des tableaux.
2. Gestion des formulaires et des entrées utilisateur : Mise à jour dynamique des listes ou traitement des valeurs d’entrée.
3. Fonctions de recherche et de tri : Gestion efficace de grands ensembles de données.
4. Développement d’applications : Construction de fonctionnalités UI comme les paniers d’achat et les gestionnaires de tâches.

8.3 Prochaines étapes d’apprentissage

1. Utilisation supplémentaire des méthodes de tableau

• Tâche suggérée : Créer une application qui récupère des données d’API et filtre les résultats à l’aide d’opérations sur les tableaux.

2. Comparer et utiliser d’autres structures de données

• Apprendre les objets, les Set et les Map pour choisir la bonne structure selon chaque scénario.

3. Appliquer les connaissances dans les frameworks JavaScript

• Utiliser les compétences sur les tableaux dans des frameworks comme React ou Vue.js pour le développement réel.

8.4 Liens de référence et ressources

• MDN Web Docs : Objet Array https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info : Tableaux et méthodes https://javascript.info/

8.5 Réflexions finales et conseils aux lecteurs

JavaScript array operations are essential for building a solid programming foundation. This article provided a structured approach from basics to advanced concepts.

Conseils

1. S’exercer en écrivant du code : Testez chaque méthode pour approfondir votre compréhension.
2. Développer des compétences en résolution de problèmes : Transformez des tâches du monde réel en programmes pour améliorer votre expertise pratique.
3. Continuer à apprendre : Apprenez de nouveaux frameworks et les dernières technologies pour améliorer votre ensemble de compétences.

Passez à l’étape suivante !

Utilisez cet article comme base pour progresser vers la création d’applications plus complexes ou l’apprentissage de frameworks modernes.

FAQ | Questions fréquentes

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

• map() : Retourne un nouveau tableau après avoir appliqué une fonction à chaque élément.
• forEach() : Exécute une fonction pour chaque élément mais ne retourne pas de nouveau tableau.

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 ?

Par défaut, sort() compare les valeurs comme des chaînes. Pour trier les nombres numériquement, 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 doublons d’un tableau ?

Utilisez l’objet Set pour supprimer facilement les doublons.

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 le tableau contient une valeur spécifique.

Exemple :

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

Q5. Comment aplatir un tableau multidimensionnel ?

Utilisez la méthode flat() pour convertir un tableau imbriqué en un tableau à un seul niveau.

Exemple :

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