Méthodes de tableau JavaScript
Conversion de tableaux en chaînes
La méthode JavaScript toString()convertit un tableau en une chaîne de valeurs de tableau (séparées par des virgules).
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Résultat:
La join()méthode joint également tous les éléments du tableau dans une chaîne.
Il se comporte comme toString(), mais en plus vous pouvez spécifier le séparateur :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Résultat:
Sauter et pousser
Lorsque vous travaillez avec des tableaux, il est facile de supprimer des éléments et d'en ajouter de nouveaux.
Voici ce qu'est le popping et le push :
Sortir des éléments d'un tableau ou pousser des éléments dans un tableau.
Tableau JavaScript pop()
La pop()méthode supprime le dernier élément d'un tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
La pop()méthode renvoie la valeur qui a été "sautée":
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
Pousser de tableau JavaScript ()
La push()méthode ajoute un nouvel élément à un tableau (à la fin) :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
La push()méthode renvoie la nouvelle longueur du tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
Éléments changeants
Le décalage équivaut à faire éclater, mais en travaillant sur le premier élément au lieu du dernier.
Changement de tableau JavaScript()
La shift()méthode supprime le premier élément du tableau et « décale » tous les autres éléments vers un index inférieur.
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
La shift()méthode renvoie la valeur qui a été "décalée":
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
Tableau JavaScript unshift()
La unshift()méthode ajoute un nouvel élément à un tableau (au début) et "décale" les anciens éléments :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
La unshift()méthode renvoie la nouvelle longueur du tableau.
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Modification des éléments
Les éléments du tableau sont accédés par leur numéro d'index :
Les index de tableau commencent par 0 :
[0] est le premier élément du tableau
[1] est le deuxième
[2] est le troisième ...
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
Longueur du tableau JavaScript
La lengthpropriété fournit un moyen simple d'ajouter un nouvel élément à un tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
Supprimer le tableau JavaScript()
Avertissement !
Les éléments du tableau peuvent être supprimés à l'aide de l'opérateur JavaScript delete.
L'utilisation de deletefeuilles laisse undefineddes trous dans le tableau.
Utilisez plutôt pop() ou shift().
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
Fusionner (concaténer) des tableaux
La concat()méthode crée un nouveau tableau en fusionnant (concaténant) des tableaux existants :
Exemple (fusion de deux tableaux)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
La concat()méthode ne modifie pas les tableaux existants. Il renvoie toujours un nouveau tableau.
La concat()méthode peut prendre n'importe quel nombre d'arguments de tableau :
Exemple (fusion de trois tableaux)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
La concat()méthode peut également prendre des chaînes comme arguments :
Exemple (fusion d'un tableau avec des valeurs)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
Réseaux d'épissage et de découpage
La splice()méthode ajoute de nouveaux éléments à un tableau.
La slice()méthode découpe un morceau d'un tableau.
JavaScript Array épissure()
La splice()méthode peut être utilisée pour ajouter de nouveaux éléments à un tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Le premier paramètre (2) définit la position où de nouveaux éléments doivent être ajoutés (raccordés).
Le deuxième paramètre (0) définit le nombre d' éléments à supprimer .
Le reste des paramètres ("Citron", "Kiwi") définissent les nouveaux éléments à ajouter .
La splice()méthode renvoie un tableau avec les éléments supprimés :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Utiliser splice() pour supprimer des éléments
Avec un paramétrage intelligent, vous pouvez utiliser splice()pour supprimer des éléments sans laisser de "trous" dans le tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
Le premier paramètre (0) définit la position où de nouveaux éléments doivent être ajoutés (raccordés).
Le deuxième paramètre (1) définit le nombre d' éléments à supprimer .
Les autres paramètres sont omis. Aucun nouvel élément ne sera ajouté.
Tranche de tableau JavaScript ()
La slice()méthode découpe un morceau d'un tableau en un nouveau tableau.
Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 1 ("Orange") :
Exemple
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
Noter
La slice()méthode crée un nouveau tableau.
La slice()méthode ne supprime aucun élément du tableau source.
Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 3 ("Apple") :
Exemple
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
La slice()méthode peut prendre deux arguments comme slice(1, 3).
La méthode sélectionne ensuite des éléments à partir de l'argument de début et jusqu'à (mais non compris) l'argument de fin.
Exemple
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
Si l'argument end est omis, comme dans les premiers exemples, la slice()
méthode découpe le reste du tableau.
Exemple
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
Automatique toString()
JavaScript convertit automatiquement un tableau en une chaîne séparée par des virgules lorsqu'une valeur primitive est attendue.
C'est toujours le cas lorsque vous essayez de générer un tableau.
Ces deux exemples produiront le même résultat :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Noter
Tous les objets JavaScript ont une méthode toString().
Recherche des valeurs Max et Min dans un tableau
Il n'y a pas de fonctions intégrées pour trouver la valeur la plus élevée ou la plus basse dans un tableau JavaScript.
Vous apprendrez comment résoudre ce problème dans le prochain chapitre de ce didacticiel.
Trier les tableaux
Le tri des tableaux est traité dans le chapitre suivant de ce didacticiel.
Référence complète de la baie
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.