20 Techniques pour Manipuler des Tableaux en JavaScript

🔍 Accéder aux Éléments

1. Récupérer le premier élément

Pour accéder à un élément dans un tableau, on utilise les crochets [] et on place l'index de l'élément à récupérer à l'intérieur. Le premier élément d'un tableau se trouve toujours à l'index 0. On utilisera donc array[0] pour accéder au premier élément d'un tableau.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits[0]); // 'pomme'

2. Récupérer le dernier élément

Pour obtenir la taille d'un tableau, on utilise la propriété array.length. Comme l'indexation commence à 0, l’index du dernier élément sera toujours égal à la taille du tableau moins 1. On utilisera donc array[array.length - 1] pour accéder au dernier élément d'un tableau.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits[fruits.length - 1]); // 'orange'

3. Obtenir une partie du tableau

La méthode slice() permet d'extraire une portion d'un tableau sans modifier le tableau d'origine. On lui fournit deux arguments : l'index de départ (inclus) et l'index de fin (exclus). Si l'index de fin est omis, la méthode extrait jusqu'à la fin du tableau. Par exemple, array.slice(1, 3) extrait les éléments à partir de l'index 1 jusqu'à l'index 2, mais exclut l'élément à l'index 3.

const fruits = ['pomme', 'banane', 'orange', 'kiwi'];
const quelquesFruits = fruits.slice(1, 3);
console.log(quelquesFruits); // ['banane', 'orange']

🛠️ Transformation des Tableaux

4. Doubler les valeurs numériques

La méthode map() permet de transformer chaque élément d'un tableau en appliquant une fonction de transformation. On lui fournit une fonction de callback qui définit comment chaque élément doit être modifié. La méthode retourne un nouveau tableau sans modifier le tableau original.

const nombres = [1, 2, 3];
const doubles = nombres.map(x => x * 2);
console.log(doubles); // [2, 4, 6]

5. Filtrer les éléments

La méthode filter() permet de sélectionner uniquement certains éléments d'un tableau selon un critère précis. On lui fournit une fonction de callback qui retourne true ou false pour chaque élément. Seuls les éléments pour lesquels la fonction retourne true sont conservés dans le nouveau tableau.

const nombres = [1, 2, 3, 4, 5];
const pairs = nombres.filter(x => x % 2 === 0);
console.log(pairs); // [2, 4]

📋 Organisation des Données

6. Trier un tableau

La méthode sort() permet de trier les éléments d'un tableau. Par défaut, elle effectue un tri alphabétique pour les chaînes de caractères. On peut lui fournir une fonction de comparaison personnalisée pour définir un ordre de tri spécifique.

// Tri alphabétique
const fruits = ['orange', 'pomme', 'banane'];
console.log(fruits.sort()); // ['banane', 'orange', 'pomme']

7. Supprimer les doublons

L'objet Set permet de créer une collection d'éléments uniques. En utilisant l'opérateur de décomposition ... avec new Set(), on peut facilement convertir un tableau contenant des doublons en un nouveau tableau sans éléments répétés.

const nombres = [1, 2, 2, 3];
const uniques = [...new Set(nombres)];
console.log(uniques); // [1, 2, 3]

🔄 Opérations de Réduction et d'Accumulation

8. Calculer la somme

La méthode reduce() permet de réduire un tableau à une seule valeur en appliquant une fonction de réduction. On lui fournit une fonction de callback qui accumule les valeurs, avec un valeur initiale (ici 0) comme point de départ.

const nombres = [1, 2, 3];
const somme = nombres.reduce((total, x) => total + x, 0);
console.log(somme); // 6

9. Compter les occurrences

La méthode reduce() peut également être utilisée pour créer un objet comptant le nombre d'occurrences de chaque élément. La fonction de callback incrémente le compteur pour chaque élément unique dans un objet accumulateur.

const fruits = ['pomme', 'orange', 'pomme'];
const occurrences = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(occurrences); // { pomme: 2, orange: 1 }

📏 Analyse et Tests sur les Éléments

10. Trouver l’élément le plus long

En utilisant reduce() avec une comparaison de longueur, on peut identifier l'élément le plus long d'un tableau. La méthode compare successivement les éléments et retourne celui ayant la plus grande longueur.

const mots = ['chat', 'éléphant', 'chien'];
const plusLong = mots.reduce((a, b) => (a.length > b.length ? a : b));
console.log(plusLong); // 'éléphant'

11. Vérifier si tous les éléments respectent une condition

La méthode every() teste si tous les éléments d'un tableau satisfont une condition donnée. Elle retourne true si la fonction de callback renvoie true pour tous les éléments, et false dès qu'un élément ne respecte pas la condition.

const nombres = [1, 2, 3];
console.log(nombres.every(x => x > 0)); // true

12. Trouver des doublons

La méthode utilisée ici identifie les éléments qui apparaissent plus d'une fois dans un tableau. Le code filter() compare l'index de la première occurrence de chaque élément avec son index actuel. Si l'index actuel est différent de l'index de première occurrence, cela signifie que l'élément est un doublon

const nombres = [1, 2, 3, 2, 4, 2, 4];
const doublons = nombres.filter((x, index, arr) => arr.indexOf(x) !== index);
console.log(doublons); // [2, 2, 4]

13. Inverser un tableau

La méthode reverse() permet de modifier l'ordre des éléments d'un tableau en inversant leur position, en commençant par le dernier élément qui devient le premier.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.reverse()); // ['orange', 'banane', 'pomme']

💡 Fonctions Utilitaires

14. Vérifier la présence d’un élément

La méthode includes() vérifie simplement si un élément est présent dans un tableau, retournant true ou false selon le résultat.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.includes('banane')); // true

15. Fusionner deux tableaux

La méthode concat() crée un nouveau tableau en combinant les éléments de plusieurs tableaux sans modifier les tableaux originaux.

const fruits = ['pomme', 'banane'];
const autresFruits = ['orange', 'kiwi'];
console.log(fruits.concat(autresFruits)); // ['pomme', 'banane', 'orange', 'kiwi']

📂 Conversion et Assemblage de Tableaux

16. Transformer une chaîne de caractères en tableau

La méthode split() permet de découper une chaîne de caractères en un tableau, en utilisant un séparateur spécifié comme critère de découpage.

const phrase = 'Bonjour à tous';
const mots = phrase.split(' ');
console.log(mots); // ['Bonjour', 'à', 'tous']

17. Fusionner un tableau en une chaîne

La méthode join() fait l'opération inverse de split(), en transformant un tableau en une chaîne de caractères unique, avec un séparateur optionnel entre les éléments.

const mots = ['Bonjour', 'à', 'tous'];
console.log(mots.join(' ')); // 'Bonjour à tous'

📜 Techniques Avancées

18. Créer un tableau

La méthode from() permet de créer un nouveau tableau à partir d'un objet itérable, comme une chaîne de caractères ou un autre type de collection.

const texte = '12345';
const tableau = Array.from(texte);
console.log(tableau); // ['1', '2', '3', '4', '5']

19. Remplir un tableau

La méthode fill() remplit tous les éléments d'un tableau avec une valeur donnée, en utilisant un index de début et de fin optionnel.

const tableau = Array(5).fill('JS');
console.log(tableau); // ['JS', 'JS', 'JS', 'JS', 'JS']

20. Trouver l’index d’un élément avec

La méthode indexOf() recherche la première occurrence d'un élément dans un tableau et retourne son index, ou -1 si l'élément n'est pas trouvé.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.indexOf('banane')); // 1

🎁 Bonus

21. Modifier les données d'un tableau

La méthode splice() permet de modifier un tableau en ajoutant, supprimant ou remplaçant des éléments à une position donnée.

const couleurs = ['rouge', 'vert', 'bleu'];

// Supprimer 1 élément à partir de l'index 1 et ajouter 'jaune'
couleurs.splice(1, 1, 'jaune');
console.log(couleurs); // ['rouge', 'jaune', 'bleu']

On peut également ajouter des éléments sans supprimer :

const autresCouleurs = ['rouge', 'jaune', 'bleu'];

// Ajouter deux éléments sans supprimer
autresCouleurs.splice(2, 0, 'orange', 'violet');
console.log(autresCouleurs); // ['rouge', 'jaune', 'orange', 'violet', 'bleu']