Manipulation de tableau : comprendre les méthodes de tableau JavaScript

Que sont les tableaux en JavaScript ? Les tableaux JavaScript sont des types de données qui peuvent stocker une collection d'éléments. Ces éléments peuvent être de n'importe quel type de données, y compris des nombres, des chaînes et des objets. Les tableaux en JavaScript sont dynamiques, ce qui signifie que vous pouvez y ajouter ou en supprimer des éléments après leur création.

Dans ce didacticiel, nous examinerons toutes les méthodes de tableau JavaScript et comment elles sont appliquées dans la pratique.

Types de méthodes Array

Il existe plusieurs méthodes pour manipuler les tableaux JavaScript. Certaines de ces méthodes sont :

1. concat()

Cette méthode est utilisée pour fusionner deux tableaux ou plus. Il ne modifie pas les tableaux d'origine, mais renvoie à la place un nouveau tableau contenant les éléments des tableaux d'origine.

Voici un exemple d'utilisation de `concat()` en JavaScript :

 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const mergedArray = array1.concat(array2, array3); // mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

Dans l'exemple ci-dessus, array1, array2 et array3 sont tous fusionnés en un seul tableau appelé `mergedArray`. `concat()` prend n'importe quel nombre de tableaux comme arguments et renvoie un nouveau tableau contenant tous les éléments des tableaux d'origine.

Vous pouvez également utiliser `concat()` pour fusionner des tableaux avec des valeurs non-tableaux. Par example:

 const array1 = [1, 2, 3]; const mergedArray = array1.concat(4, 5, 6); // mergedArray is [1, 2, 3, 4, 5, 6]

Dans ce cas, les valeurs 4, 5 et 6 sont ajoutées à la fin de array1 pour créer le `mergedArray`.

Notez que `concat()` ne modifie pas les tableaux d'origine. Au lieu de cela, il crée un nouveau tableau qui contient les éléments des tableaux d'origine. Si vous souhaitez modifier un tableau sur place, vous pouvez utiliser la méthode `push()` à la place.

2. rejoindre ()

Cette méthode est utilisée pour joindre tous les éléments d'un tableau en une chaîne. Il prend un paramètre séparateur facultatif, qui spécifie le caractère à utiliser pour séparer les éléments du tableau dans la chaîne résultante. Si aucun séparateur n'est fourni, les éléments sont séparés par une virgule.

Voici un exemple d'utilisation de `join()` en JavaScript :

 const array = ['apple', 'banana', 'orange']; const fruitString = array.join(); // fruitString is 'apple,banana,orange' const array = [1, 2, 3]; const numberString = array.join('-'); // numberString is '1-2-3'

Dans le premier exemple, les éléments du tableau sont joints en une seule chaîne avec une virgule comme séparateur. Dans le deuxième exemple, les éléments du tableau sont joints en une seule chaîne avec un trait d'union comme séparateur.

Vous pouvez également utiliser `join()` sur un tableau de tableaux pour créer une chaîne de tableaux imbriqués :

 const array = [[1, 2], [3, 4], [5, 6]]; const nestedArrayString = array.join('-'); // nestedArrayString is '1,2-3,4-5,6'

Notez que `join()` ne modifie pas le tableau d'origine. Il crée une nouvelle chaîne qui contient les éléments du tableau. Si vous souhaitez modifier le tableau en place, vous pouvez utiliser la méthode `splice()` à la place.

3. pop()

Cette méthode est utilisée pour supprimer le dernier élément d'un tableau et le retourner. Il modifie le tableau d'origine.

Voici un exemple d'utilisation de `pop()` en JavaScript :

 const array = [1, 2, 3, 4, 5]; const lastElement = array.pop(); // lastElement is 5 // array is [1, 2, 3, 4]

Dans cet exemple, la méthode `pop()` supprime le dernier élément (5) du tableau et l'affecte à la variable `lastElement`. Le tableau est ensuite modifié pour supprimer le dernier élément, le laissant avec une longueur de 4.

Vous pouvez également utiliser `pop()` en combinaison avec d'autres méthodes de tableau, telles que `push()` pour ajouter des éléments à la fin du tableau :

 const array = [1, 2, 3]; array.push(4); array.pop(); // array is [1, 2, 3]

Dans cet exemple, la méthode `push()` ajoute l'élément 4 à la fin du tableau, puis la méthode `pop()` le supprime à nouveau, laissant le tableau inchangé.

Notez que si le tableau est vide, `pop()` renvoie undefined.

 const array = []; const element = array.pop(); // element is undefined

4. appuyez()

Cette méthode est utilisée pour ajouter un ou plusieurs éléments à la fin d'un tableau. Il modifie le tableau d'origine et renvoie la nouvelle longueur du tableau.

Voici un exemple d'utilisation de push() en JavaScript :

 const array = [1, 2, 3]; const newLength = array.push(4, 5, 6); // array is [1, 2, 3, 4, 5, 6] // newLength is 6

Dans cet exemple, la méthode push() ajoute les éléments 4, 5 et 6 à la fin du tableau et renvoie la nouvelle longueur du tableau (6). Le tableau est ensuite modifié pour inclure ces éléments.

Vous pouvez également utiliser push() pour ajouter un tableau d'éléments à la fin d'un autre tableau :

 const array = [1, 2, 3]; const newLength = array.push([4, 5, 6]); // array is [1, 2, 3, [4, 5, 6]] // newLength is 4

Dans cet exemple, la méthode push() ajoute le tableau [4, 5, 6] en tant qu'élément unique à la fin du tableau et renvoie la nouvelle longueur du tableau (4).

Notez que push() modifie le tableau d'origine. Si vous souhaitez créer un nouveau tableau qui inclut les éléments du tableau d'origine, vous pouvez utiliser la méthode concat() à la place.

5. décalage()

Cette méthode est utilisée pour supprimer le premier élément d'un tableau et le retourner. Il modifie le tableau d'origine.

Voici un exemple d'utilisation de shift() en JavaScript :

 const array = [1, 2, 3, 4, 5]; const firstElement = array.shift(); // firstElement is 1 // array is [2, 3, 4, 5]

Dans cet exemple, la méthode shift() supprime le premier élément (1) du tableau et l'affecte à la variable firstElement. Le tableau est ensuite modifié pour supprimer le premier élément, le laissant avec une longueur de 4.

Vous pouvez également utiliser shift() en combinaison avec d'autres méthodes de tableau, telles que unshift() pour ajouter des éléments au début du tableau :

 const array = [1, 2, 3]; array.unshift(0); array.shift(); // array is [1, 2, 3]

Dans cet exemple, la méthode unshift() ajoute l'élément 0 au début du tableau, puis la méthode shift() le supprime à nouveau, laissant le tableau inchangé.

Notez que si le tableau est vide, shift() renvoie undefined.

 const array = []; const element = array.shift(); // element is undefined

6. unshift()

Cette méthode est utilisée pour ajouter un ou plusieurs éléments au début d'un tableau. Il modifie le tableau d'origine et renvoie la nouvelle longueur du tableau.

Voici un exemple de la façon dont unshift() peut être utilisé en JavaScript :

 const array = [1, 2, 3]; const newLength = array.unshift(4, 5, 6); // array is [4, 5, 6, 1, 2, 3] // newLength is 6

Dans cet exemple, la méthode unshift() ajoute les éléments 4, 5 et 6 au début du tableau et renvoie la nouvelle longueur du tableau (6). Le tableau est ensuite modifié pour inclure ces éléments au début.

Vous pouvez également utiliser unshift() pour ajouter un tableau d'éléments au début d'un autre tableau :

 const array = [1, 2, 3]; const newLength = array.unshift([4, 5, 6]); // array is [[4, 5, 6], 1, 2, 3] // newLength is 4

Dans cet exemple, la méthode unshift() ajoute le tableau [4, 5, 6] en tant qu'élément unique au début du tableau et renvoie la nouvelle longueur du tableau (4).

Notez que unshift() modifie le tableau d'origine. Si vous souhaitez créer un nouveau tableau qui inclut les éléments du tableau d'origine, vous pouvez utiliser la méthode concat() à la place.

7. tranche()

Cette méthode est utilisée pour extraire une section d'un tableau et retourner un nouveau tableau. Il ne modifie pas le tableau d'origine. La méthode slice prend deux paramètres facultatifs : un index de début et un index de fin.

Si l'index de début n'est pas spécifié, il prend par défaut le début du tableau. Si l'index de fin n'est pas spécifié, il prend par défaut la fin du tableau.

Voici un exemple d'utilisation de slice() en JavaScript :

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(1, 3); // slice is [2, 3] // array is [1, 2, 3, 4, 5] (unchanged)

Dans cet exemple, la méthode slice() extrait les éléments aux indices 1 et 2 (2 et 3) du tableau et les renvoie dans un nouveau tableau appelé slice. Le tableau d'origine n'est pas modifié.

Vous pouvez également utiliser slice() avec un seul argument, qui indique l'index de départ :

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(2); // slice is [3, 4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Dans ce cas, la méthode slice() extrait tous les éléments du tableau à partir de l'index 2 (inclus) jusqu'à la fin du tableau.

Vous pouvez également utiliser des indices négatifs avec slice(), qui indique la position de l'élément par rapport à la fin du tableau :

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(-2); // slice is [4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Dans ce cas, la méthode slice() extrait les deux derniers éléments du tableau.

Notez que si l'index de début est supérieur à l'index de fin, slice() renvoie un tableau vide.

8. épissure()

La méthode splice() en JavaScript est utilisée pour ajouter ou supprimer des éléments d'un tableau et renvoyer les éléments supprimés sous la forme d'un nouveau tableau. Il modifie le tableau d'origine.

La méthode splice() prend au moins deux arguments : un index de début et un nombre de suppressions. L'index de début est l'index auquel la jonction commence et le nombre de suppressions est le nombre d'éléments à supprimer.

Voici un exemple d'utilisation de splice() pour supprimer des éléments d'un tableau :

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2); // removedElements is [2, 3] // array is [1, 4, 5]

Dans cet exemple, la méthode splice() supprime les éléments aux indices 1 et 2 (2 et 3) du tableau et les renvoie dans un nouveau tableau appelé removeElements. Le tableau d'origine est modifié pour supprimer ces éléments.

Vous pouvez également utiliser splice() pour ajouter des éléments à un tableau :

 const array = [1, 2, 3]; const removedElements = array.splice(1, 0, 4, 5, 6); // removedElements is [] // array is [1, 4, 5, 6, 2, 3]

Dans ce cas, la méthode splice() ajoute les éléments 4, 5 et 6 au tableau à l'index 1, et le nombre de suppressions est 0, donc aucun élément n'est supprimé. Le tableau d'origine est modifié pour inclure ces éléments.

Vous pouvez également utiliser splice() pour ajouter et supprimer des éléments en même temps :

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2, 6, 7); // removedElements is [2, 3] // array is [1, 6, 7, 4, 5]

Dans cet exemple, la méthode splice() supprime les éléments aux indices 1 et 2 (2 et 3) du tableau et ajoute les éléments 6 et 7 aux mêmes indices. Le tableau d'origine est modifié pour inclure les éléments ajoutés et supprimer les éléments supprimés.

Notez que si l'index de début est supérieur à la longueur du tableau, splice() n'ajoute ni ne supprime aucun élément, mais renvoie simplement un tableau vide.

9. inverse()

Cette méthode est utilisée pour inverser l'ordre des éléments d'un tableau. Il modifie le tableau d'origine.

Voici un exemple d'utilisation de reverse() en JavaScript :

 const array = [1, 2, 3, 4, 5]; array.reverse(); // array is [5, 4, 3, 2, 1]

Dans cet exemple, la méthode reverse() inverse l'ordre des éléments du tableau, de sorte que le premier élément devient le dernier et le dernier élément devient le premier.

Vous pouvez également utiliser reverse() sur un tableau d'objets :

 const array = [{id: 1}, {id: 2}, {id: 3}]; array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

Dans ce cas, la méthode reverse() inverse l'ordre des objets dans le tableau.

Notez que reverse() modifie le tableau d'origine. Si vous souhaitez créer un nouveau tableau qui est l'inverse du tableau d'origine, vous pouvez utiliser les méthodes slice() et reverse() ensemble :

 const array = [1, 2, 3, 4, 5]; const reversedArray = array.slice().reverse(); // reversedArray is [5, 4, 3, 2, 1] // array is [1, 2, 3, 4, 5] (unchanged)

Dans cet exemple, la méthode slice() crée une copie superficielle du tableau et la méthode reverse() inverse les éléments de la copie, laissant le tableau d'origine inchangé.

10. trier()

Cette méthode est utilisée pour trier les éléments d'un tableau en place. Il peut prendre une fonction de comparaison facultative comme paramètre, ce qui vous permet de spécifier un algorithme de tri personnalisé. Si aucune fonction de comparaison n'est fournie, les éléments sont triés par ordre croissant en fonction de leurs points de code Unicode.

Voici un exemple d'utilisation de sort() en JavaScript :

 const array = [5, 2, 4, 1, 3]; array.sort(); // array is [1, 2, 3, 4, 5]

Dans cet exemple, la méthode sort() trie les éléments du tableau par ordre croissant.

Vous pouvez également utiliser sort() avec une fonction de comparaison comme argument pour spécifier un ordre de tri personnalisé :

 const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}]; array.sort((a, b) => a.name.localeCompare(b.name)); // array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

Dans ce cas, la méthode sort() trie les objets du tableau en fonction de leurs propriétés de nom à l'aide de la méthode localeCompare(). Notez que sort() modifie le tableau d'origine.

Également par défaut, sort() convertit les éléments du tableau en chaînes et les trie en fonction de leurs valeurs de point Unicode. Cela peut entraîner des résultats inattendus pour les valeurs autres que des chaînes. Par example:

 const array = [10, 5, 8, 1, 7]; array.sort(); // array is [1, 10, 5, 7, 8]

Dans ce cas, la méthode sort() convertit les nombres en chaînes avant de les trier, de sorte que le tableau résultant n'est pas dans l'ordre numérique. Pour trier le tableau dans l'ordre numérique, vous pouvez utiliser une fonction de comparaison comme argument de sort() :

 const array = [10, 5, 8, 1, 7]; array.sort((a, b) => a - b); // array is [1, 5, 7, 8, 10]

Si vous souhaitez trier les éléments d'un tableau par ordre décroissant, vous pouvez utiliser la fonction de comparaison suivante comme argument de sort() :

 const array = [5, 2, 4, 1, 3]; array.sort((a, b) => b - a); // array is [5, 4, 3, 2, 1]

Conclusion

Ce ne sont là que quelques-unes des nombreuses méthodes disponibles pour travailler avec des tableaux en JavaScript. J'espère que ça aide! Faites-moi savoir si vous avez d'autres questions.