Méthodes de tableau JavaScript

Les tableaux JavaScript sont livrés avec un riche ensemble de méthodes intégrées pour effectuer des opérations courantes comme l’ajout/la suppression d’éléments, l’itération, la transformation, et plus encore. Comprendre ces méthodes est essentiel pour une programmation JavaScript efficace.

Conversion de tableaux en chaînes de caractères

La méthode toString() convertit un tableau en une chaîne de caractères de ses éléments, séparés par des virgules.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); // Sortie : "Banana,Orange,Apple,Mango"

La méthode join() joint également tous les éléments d’un tableau en une chaîne de caractères, mais vous permet de spécifier un séparateur.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" * ")); // Sortie : "Banana * Orange * Apple * Mango"
console.log(fruits.join(" - ")); // Sortie : "Banana - Orange - Apple - Mango"

Ajout et Suppression d’Éléments (Méthodes de mutation)

Ces méthodes modifient le tableau original.

pop() : Supprime le dernier élément d’un tableau et retourne cet élément.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const lastFruit = fruits.pop();
console.log(lastFruit); // Sortie : "Mango"
console.log(fruits);    // Sortie : ["Banana", "Orange", "Apple"]

push() : Ajoute un ou plusieurs nouveaux éléments à la fin d’un tableau et retourne la nouvelle longueur du tableau.

const fruits = ["Banana", "Orange", "Apple"];
const newLength = fruits.push("Kiwi", "Lemon");
console.log(newLength); // Sortie : 5
console.log(fruits);    // Sortie : ["Banana", "Orange", "Apple", "Kiwi", "Lemon"]

shift() : Supprime le premier élément d’un tableau et retourne cet élément. Cette opération décale tous les éléments suivants vers un index inférieur.

const fruits = ["Banana", "Orange", "Apple"];
const firstFruit = fruits.shift();
console.log(firstFruit); // Sortie : "Banana"
console.log(fruits);     // Sortie : ["Orange", "Apple"]

unshift() : Ajoute un ou plusieurs nouveaux éléments au début d’un tableau et retourne la nouvelle longueur du tableau. Cette opération décale les éléments existants vers des index supérieurs.

const fruits = ["Orange", "Apple"];
const newLengthUnshift = fruits.unshift("Lemon", "Pineapple");
console.log(newLengthUnshift); // Sortie : 4
console.log(fruits);         // Sortie : ["Lemon", "Pineapple", "Orange", "Apple"]

splice() : Une méthode puissante pour modifier le contenu d’un tableau en supprimant ou en remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments sur place. Elle retourne un tableau contenant les éléments supprimés.

Syntaxe : array.splice(startIndex, deleteCount, item1, item2, ...)

const fruits = ["Banana", "Orange", "Apple", "Mango"];
// Ajouter des éléments : À l'index 2, supprimer 0 élément, ajouter "Lemon", "Kiwi"
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // Sortie : ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

// Supprimer des éléments : À l'index 0, supprimer 1 élément
const removed = fruits.splice(0, 1);
console.log(removed); // Sortie : ["Banana"]
console.log(fruits);  // Sortie : ["Orange", "Lemon", "Kiwi", "Apple", "Mango"]

// Remplacer des éléments : À l'index 1, supprimer 2 éléments, ajouter "Grape"
fruits.splice(1, 2, "Grape");
console.log(fruits); // Sortie : ["Orange", "Grape", "Apple", "Mango"]

Remarque : L’utilisation de delete array[index] crée des trous undefined dans le tableau. Il est généralement préférable d’utiliser splice(), pop() ou shift() pour supprimer des éléments.

Création de nouveaux tableaux à partir d’existants (Méthodes non mutantes)

Ces méthodes retournent un nouveau tableau et ne modifient pas l’original.

concat() : Fusionne deux tableaux ou plus (ou des valeurs) pour créer un nouveau tableau.

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias"];
const arr3 = ["Robin"];
const children = arr1.concat(arr2, arr3, "Peter");
console.log(children); // Sortie : ["Cecilie", "Lone", "Emil", "Tobias", "Robin", "Peter"]
console.log(arr1);     // Sortie : ["Cecilie", "Lone"] (original inchangé)

L’utilisation de la syntaxe de propagation (...) est une alternative moderne pour la concaténation :

const newChildren = [...arr1, ...arr2, ...arr3, "Peter"];
console.log(newChildren);

slice() : Extrait une section d’un tableau et retourne un nouveau tableau. Le tableau original n’est pas modifié.

Syntaxe : array.slice(startIndex, endIndex) (endIndex est exclusif)

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3); // Éléments de l'index 1 jusqu'à (mais non compris) l'index 3
console.log(citrus); // Sortie : ["Orange", "Lemon"]

const endFruits = fruits.slice(2); // Éléments de l'index 2 jusqu'à la fin
console.log(endFruits); // Sortie : ["Lemon", "Apple", "Mango"]

const shallowCopy = fruits.slice(); // Crée une copie superficielle du tableau
console.log(shallowCopy);

La syntaxe de propagation (...) est également couramment utilisée pour la copie superficielle de tableaux :

const spreadCopy = [...fruits];
console.log(spreadCopy);

Trier les tableaux

sort() : Trie les éléments d’un tableau sur place et retourne le tableau trié. Par défaut, il trie les éléments comme des chaînes de caractères (lexicographiquement).

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // Sortie : ["Apple", "Banana", "Mango", "Orange"]

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort(); // Tri numérique incorrect !
console.log(numbers); // Sortie : [1, 10, 100, 25, 40, 5] (trié comme des chaînes de caractères)

Tri Numérique : Pour trier les nombres correctement, vous devez fournir une fonction de comparaison.

const points = [40, 100, 1, 5, 25, 10];
// Ordre croissant
points.sort(function(a, b) { return a - b; });
// Utilisation de la fonction fléchée : points.sort((a, b) => a - b);
console.log(points); // Sortie : [1, 5, 10, 25, 40, 100]

// Ordre décroissant
points.sort(function(a, b) { return b - a; });
// Utilisation de la fonction fléchée : points.sort((a, b) => b - a);
console.log(points); // Sortie : [100, 40, 25, 10, 5, 1]

La fonction de comparaison (a, b) doit retourner : une valeur négative si a doit précéder b, une valeur positive si a doit suivre b, ou zéro si leur ordre n’a pas d’importance.

reverse() : Inverse l’ordre des éléments d’un tableau sur place et retourne le tableau inversé.

const fruits = ["Banana", "Orange", "Apple"];
fruits.reverse();
console.log(fruits); // Sortie : ["Apple", "Orange", "Banana"]

Méthodes d’itération et de transformation modernes (ES5+)

Ces méthodes sont généralement préférées aux boucles for manuelles pour leur concision et leur expressivité. Elles ne modifient pas le tableau original, sauf indication contraire (comme une fonction de rappel forEach pourrait le faire).

forEach(callbackFn) : Exécute une fonction fournie une fois pour chaque élément du tableau.

const numbers = [1, 2, 3];
numbers.forEach(function(number, index, array) {
  console.log(`Element at index ${index}: ${number}`);
});

map(callbackFn) : Crée un nouveau tableau rempli avec les résultats de l’appel d’une fonction fournie sur chaque élément du tableau appelant.

const numbers = [1, 4, 9];
const roots = numbers.map(function(num) {
  return Math.sqrt(num);
});
// Utilisation de la fonction fléchée : const roots = numbers.map(num => Math.sqrt(num));
console.log(roots); // Sortie : [1, 2, 3]

filter(callbackFn) : Crée un nouveau tableau avec tous les éléments qui satisfont le test implémenté par la fonction fournie.

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
// Utilisation de la fonction fléchée : const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // Sortie : [2, 4, 6]

reduce(callbackFn, initialValue) : Exécute une fonction de réduction sur chaque élément du tableau, ce qui donne une seule valeur de sortie.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 0 est la valeur initiale pour l'accumulateur
// Utilisation de la fonction fléchée : const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum); // Sortie : 10

find(callbackFn) : Retourne le premier élément du tableau qui satisfait la fonction de test fournie. Sinon, undefined est retourné.

const numbers = [10, 20, 35, 40];
const found = numbers.find(num => num > 30);
console.log(found); // Sortie : 35

findIndex(callbackFn) : Retourne l’index du premier élément du tableau qui satisfait la fonction de test fournie. Sinon, il retourne -1.

const numbers = [10, 20, 35, 40];
const foundIndex = numbers.findIndex(num => num > 30);
console.log(foundIndex); // Sortie : 2

some(callbackFn) : Teste si au moins un élément du tableau satisfait le test implémenté par la fonction fournie. Retourne un booléen.

const numbers = [1, 3, 5, 7, 8];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // Sortie : true

every(callbackFn) : Teste si tous les éléments du tableau satisfont le test implémenté par la fonction fournie. Retourne un booléen.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // Sortie : true

includes(valueToFind, fromIndex) : Détermine si un tableau inclut une certaine valeur parmi ses entrées, retournant true ou false.

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));    // Sortie : true
console.log(pets.includes('at'));     // Sortie : false (vérifie l'élément entier)
console.log(pets.includes('dog', 1)); // Sortie : true (commence la recherche à partir de l'index 1)

Autres méthodes utiles (ES6+)

Array.from(arrayLikeOrIterable) : Crée une nouvelle instance de tableau, copiée superficiellement, à partir d’un objet de type tableau ou itérable.

const str = "hello";
const chars = Array.from(str);
console.log(chars); // Sortie : ['h', 'e', 'l', 'l', 'o']

function getArgs() {
  return Array.from(arguments);
}
console.log(getArgs(1, 'a', true)); // Sortie : [1, 'a', true]

flat(depth) : Crée un nouveau tableau avec tous les éléments des sous-tableaux concaténés récursivement jusqu’à la profondeur spécifiée.

const arr = [1, [2, [3, 4]], 5];
console.log(arr.flat());      // Sortie : [1, 2, [3, 4], 5] (profondeur 1)
console.log(arr.flat(2));     // Sortie : [1, 2, 3, 4, 5]
console.log(arr.flat(Infinity)); // Sortie : [1, 2, 3, 4, 5]

flatMap(callbackFn) : Applique d’abord une fonction de mappage à chaque élément, puis aplatit le résultat dans un nouveau tableau. C’est identique à a.map(...args).flat(), mais légèrement plus efficace.

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // Sortie : [1, 2, 2, 4, 3, 6]

Rechercher le Max/Min dans un tableau

Bien que sort() puisse être utilisé, ce n’est pas la méthode la plus efficace pour trouver la valeur la plus haute ou la plus basse. Utilisez Math.max() ou Math.min() avec la syntaxe de propagation, ou reduce().

const points = [40, 100, 1, 5, 25, 10];

// Utilisation de Math.max/min avec l'opérateur de propagation
const highest = Math.max(...points);
const lowest = Math.min(...points);
console.log(`Highest: ${highest}, Lowest: ${lowest}`); // Plus haut : 100, Plus bas : 1

// Utilisation de reduce
const highestReduce = points.reduce((max, current) => Math.max(max, current), -Infinity);
const lowestReduce = points.reduce((min, current) => Math.min(min, current), Infinity);
console.log(`Highest (reduce): ${highestReduce}, Lowest (reduce): ${lowestReduce}`);

Référence complète des tableaux

Les tableaux JavaScript possèdent de nombreuses autres méthodes. Pour une référence complète, incluant des descriptions détaillées, la syntaxe et des exemples de toutes les propriétés et méthodes de l’objet Array, consultez la documentation MDN Web Docs pour l’objet JavaScript Array.