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:
Banane,Orange,Pomme,Mangue
Essayez-le vous-même »
Le join() La 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:
Banane * Orange * Pomme * Mangue
Essayez-le vous-même »
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 :
Articles éclatants dehors d’un tableau, ou en poussant des éléments dans un tableau.
Tableau JavaScript pop()
Le pop() supprime le dernier élément d’un tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.pop();
Essayez-le vous-même »
Le pop() La méthode renvoie la valeur qui a été “sautée”:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
laisser fruit = fruits.pop();
Essayez-le vous-même »
Pousser de tableau JavaScript ()
Le push() méthode ajoute un nouvel élément à un tableau (à la fin):
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.push(“Kiwi”);
Essayez-le vous-même »
Le push() renvoie la nouvelle longueur du tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
let length = fruits.push(“Kiwi”);
Essayez-le vous-même »
É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()
Le shift() La 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();
Essayez-le vous-même »
Le shift() La méthode renvoie la valeur qui a été “décalée”:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
laisser fruit = fruits.shift();
Essayez-le vous-même »
Tableau JavaScript unshift()
Le unshift() La 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(“Citron”);
Essayez-le vous-même »
Le unshift() renvoie la nouvelle longueur du tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.unshift(“Citron”);
Essayez-le vous-même »
Modification des éléments
Les éléments du tableau sont accessibles à l’aide de leur numéro d’index:
Déployer index commencer 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”];
des fruits[0] = “Kiwi” ;
Essayez-le vous-même »
Longueur du tableau JavaScript
Le length La propriété fournit un moyen simple d’ajouter un nouvel élément à un tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
des fruits[fruits.length] = “Kiwi” ;
Essayez-le vous-même »
Supprimer le tableau JavaScript()
Avertissement !
Les éléments du tableau peuvent être supprimés à l’aide de l’opérateur JavaScript delete.
En utilisant delete feuilles undefined trous dans le tableau.
Utilisez plutôt pop() ou shift().
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
supprimer les fruits[0];
Essayez-le vous-même »
Fusionner (concaténer) des tableaux
Le concat() La méthode crée un nouveau tableau en fusionnant (concaténant) des tableaux existants :
Exemple (fusion de deux tableaux)
const mes filles = [“Cecilie”, “Lone”];
const mes garçons = [“Emil”, “Tobias”, “Linus”];
const myChildren = myGirls.concat(myBoys);
Essayez-le vous-même »
Le concat() La méthode ne modifie pas les tableaux existants. Il renvoie toujours un nouveau tableau.
Le concat() 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 mesEnfants = arr1.concat(arr2, arr3);
Essayez-le vous-même »
Le concat() peut également prendre des chaînes comme arguments :
Exemple (fusion d’un tableau avec des valeurs)
const arr1 = [“Emil”, “Tobias”, “Linus”];
const mesEnfants = arr1.concat(“Pierre”);
Essayez-le vous-même »
Aplatir un tableau
L’aplatissement d’un tableau est le processus de réduction de la dimensionnalité d’un tableau.
La méthode flat() crée un nouveau tableau avec des éléments de sous-tableau concaténés à une profondeur spécifiée.
Prise en charge du navigateur
Tableau JavaScript flat() est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 69 | Bord 79 | Firefox 62 | Safari 12 | Opéra 56 |
| Septembre 2018 | janvier 2020 | Septembre 2018 | Septembre 2018 | Septembre 2018 |
Réseaux d’épissage et de découpage
Le splice() La méthode ajoute de nouveaux éléments à un tableau.
Le slice() La méthode découpe un morceau d’un tableau.
JavaScript Array épissure()
Le splice() peut être utilisée pour ajouter de nouveaux éléments à un tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 0, “Citron”, “Kiwi”);
Essayez-le vous-même »
Le premier paramètre (2) définit la position où de nouveaux éléments doivent être
ajoutée (épissé).
Le deuxième paramètre (0) définit combien les éléments doivent être
supprimé.
Le reste des paramètres (“Citron”, “Kiwi”) définissent les nouveaux éléments à
ajoutée.
Le splice() renvoie un tableau avec les éléments supprimés :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 2, “Citron”, “Kiwi”);
Essayez-le vous-même »
Utiliser splice() pour supprimer des éléments
Grâce à un paramétrage astucieux, 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);
Essayez-le vous-même »
Le premier paramètre (0) définit la position où les nouveaux éléments doivent être
ajoutée (épissé).
Le deuxième paramètre (1) définit combien les éléments doivent être
supprimé.
Les autres paramètres sont omis. Aucun nouvel élément ne sera ajouté.
Tranche de tableau JavaScript ()
Le slice() La 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 agrumes = fruits.tranche(1);
Essayez-le vous-même »
Note
Le slice() La méthode crée un nouveau tableau.
Le slice() La 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 agrumes = fruits.tranche(3);
Essayez-le vous-même »
Le slice() la 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 agrumes = fruits.tranche(1, 3);
Essayez-le vous-même »
Si l’argument end est omis, comme dans les premiers exemples, le slice()
La méthode découpe le reste du tableau.
Exemple
const fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
const agrumes = fruits.tranche(2);
Essayez-le vous-même »
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();
Essayez-le vous-même »
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = fruits;
Essayez-le vous-même »
Note
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
Pour une référence Array complète, rendez-vous sur :
Référence complète du tableau JavaScript.
La référence contient des descriptions et des exemples de toutes les propriétés et méthodes Array.
#Méthodes #tableau #JavaScript
