Les tableaux sont l’une des structures de données les plus importantes et les plus utilisées en JavaScript. Que vous stockiez une liste de nombres, de chaînes, d’objets, ou même d’autres tableaux, maîtriser les tableaux et leurs méthodes intégrées vous rendra plus efficace en tant que développeur.
Dans cet article, nous allons explorer les tableaux en JavaScript en détail, revoir les méthodes les plus utilisées et fournir des exemples de code pratiques pour mieux comprendre leur utilisation dans des projets réels.
1. Qu’est-ce qu’un Tableau ?
Un tableau est un type spécial d’objet en JavaScript qui sert à stocker des collections ordonnées d’éléments. Chaque élément possède un index, en commençant à 0.
// Exemple d’un tableau
const fruits = ["pomme", "banane", "mangue", "orange"];
console.log(fruits[0]); // "pomme"
console.log(fruits[2]); // "mangue"
2. Créer un Tableau
Il existe plusieurs façons de créer des tableaux en JavaScript :
// Avec un littéral de tableau (le plus courant)
const nombres = [1, 2, 3, 4, 5];
// Avec le constructeur Array
const couleurs = new Array("rouge", "vert", "bleu");
// Tableau vide puis ajout de valeurs
const animaux = [];
animaux.push("chat");
animaux.push("chien");
3. Méthodes Courantes des Tableaux
Voyons maintenant les méthodes les plus utiles.
push() et pop()
push()ajoute un élément à la fin du tableau.pop()supprime le dernier élément.
const fruits = ["pomme", "banane"];
fruits.push("orange");
console.log(fruits); // ["pomme", "banane", "orange"]
fruits.pop();
console.log(fruits); // ["pomme", "banane"]
shift() et unshift()
shift()supprime le premier élément.unshift()ajoute un élément au début.
const nombres = [2, 3, 4];
nombres.unshift(1);
console.log(nombres); // [1, 2, 3, 4]
nombres.shift();
console.log(nombres); // [2, 3, 4]
concat()
Permet de fusionner deux tableaux.
const a = [1, 2];
const b = [3, 4];
const fusion = a.concat(b);
console.log(fusion); // [1, 2, 3, 4]
slice()
Retourne une portion du tableau sans le modifier.
const fruits = ["pomme", "banane", "cerise", "datte"];
const tranches = fruits.slice(1, 3);
console.log(tranches); // ["banane", "cerise"]
splice()
Peut ajouter, supprimer ou remplacer des éléments dans un tableau.
const nombres = [1, 2, 3, 4, 5];
nombres.splice(2, 1, 99);
console.log(nombres); // [1, 2, 99, 4, 5]
map()
Crée un nouveau tableau en appliquant une fonction à chaque élément.
const nombres = [1, 2, 3, 4];
const doubles = nombres.map(n => n * 2);
console.log(doubles); // [2, 4, 6, 8]
filter()
Retourne un nouveau tableau avec seulement les éléments qui respectent une condition.
const nombres = [10, 15, 20, 25];
const pairs = nombres.filter(n => n % 2 === 0);
console.log(pairs); // [10, 20]
reduce()
Réduit un tableau à une seule valeur.
const nombres = [1, 2, 3, 4];
const somme = nombres.reduce((acc, cur) => acc + cur, 0);
console.log(somme); // 10
forEach()
Exécute une fonction sur chaque élément.
const fruits = ["pomme", "banane", "mangue"];
fruits.forEach(fruit => console.log(fruit.toUpperCase()));
find() et findIndex()
const nombres = [5, 10, 15, 20];
const premierSup10 = nombres.find(n => n > 10);
console.log(premierSup10); // 15
const index = nombres.findIndex(n => n > 10);
console.log(index); // 2
sort()
Trie les éléments d’un tableau (par défaut en ordre lexicographique).
const nombres = [40, 10, 30, 20];
nombres.sort((a, b) => a - b);
console.log(nombres); // [10, 20, 30, 40]
includes()
Vérifie si un élément existe dans un tableau.
const couleurs = ["rouge", "bleu", "vert"];
console.log(couleurs.includes("bleu")); // true
console.log(couleurs.includes("jaune")); // false
flat()
Aplati les tableaux imbriqués.
const imbrique = [1, [2, [3, 4]]];
console.log(imbrique.flat(2)); // [1, 2, 3, 4]
4. Astuces Utiles avec les Tableaux
- Supprimer les doublons avec
Set:
const nums = [1, 2, 2, 3, 4, 4];
const unique = [...new Set(nums)];
console.log(unique); // [1, 2, 3, 4]
- Convertir une chaîne en tableau :
const texte = "bonjour";
console.log(texte.split("")); // ["b", "o", "n", "j", "o", "u", "r"]
- Convertir un tableau en chaîne :
const fruits = ["pomme", "banane"];
console.log(fruits.join(", ")); // "pomme, banane"
5. Conclusion
Les tableaux sont au cœur de la programmation JavaScript. Qu’il s’agisse de stocker des données simples ou de faire des transformations complexes, les méthodes de tableau offrent des outils puissants pour manipuler les données efficacement. En les maîtrisant, vous écrirez du code plus clair, plus concis et plus expressif.