Méthodes de tableau JavaScript
Méthodes de tableau de base
Voir aussi :
Tutoriel sur les tableaux JavaScript
Méthodes de recherche de tableaux JavaScript
Longueur du tableau JavaScript
La propriété length renvoie la longueur (taille) d'un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let size = fruits.length; La propriété length peut également être utilisée pour définir la longueur d'un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.length = 2; JavaScript Array toString()
La méthode toString() renvoie les éléments d'un tableau sous forme de chaîne séparée par des virgules.
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let myList = fruits.toString(); Note
Chaque objet JavaScript a une méthode toString() .
La méthode toString() est utilisée en interne par JavaScript lorsqu'un objet doit être affiché sous forme de texte (comme dans HTML), ou lorsqu'un objet doit être utilisé comme une chaîne.
JavaScript Array at()
ES2022 a introduit la méthode de tableau at() :
Exemples
Obtenez le troisième élément de fruits en utilisant at() :
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits.at(2); Obtenez le troisième élément de fruits en utilisant [] :
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits[2]; La méthode at() renvoie un élément indexé d'un tableau.
La méthode at() renvoie la même chose que [] .
Support des navigateurs
at() est une fonctionnalité ES2022.
JavaScript 2022 est pris en charge dans tous les navigateurs modernes depuis mars 2022 :
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
| Avr 2021 | Juil 2021 | Juil 2021 | Mar 2022 | Août 2021 |
Note
De nombreuses langues permettent l' indexation négative par crochets comme [-1] pour accéder aux éléments à partir de la fin d'un objet / tableau / chaîne.
Cela n'est pas possible en JavaScript, car [] est utilisé pour accéder à la fois aux tableaux et aux objets. obj[-1] fait référence à la valeur de la clé -1, et non à la dernière propriété de l'objet.
La méthode at() a été introduite dans ES2022 pour résoudre ce problème.
JavaScript Array join()
La méthode join() joint également tous les éléments du tableau en une chaîne.
Elle se comporte exactement comme toString() , mais en plus, vous pouvez spécifier le séparateur :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
document.getElementById("demo").innerHTML = fruits.join(" * "); Résultat :
Popping et Pushing
Lorsque vous travaillez avec des tableaux, il est facile de supprimer des éléments et d'en ajouter de nouveaux.
C'est ce que signifie popping et pushing :
Popping des éléments hors d'un tableau, ou pushing des éléments dans un tableau.
JavaScript Array pop()
La méthode pop() supprime le dernier élément d'un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.pop(); La méthode pop() renvoie la valeur qui a été "popped out" :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits.pop(); JavaScript Array push()
La méthode push() ajoute un nouvel élément à un tableau (à la fin) :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.push("Kiwi"); La méthode push() renvoie la nouvelle longueur du tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let length = fruits.push("Kiwi"); Shifting Elements
Shifting est équivalent à popping, mais en travaillant sur le premier élément au lieu du dernier.
JavaScript Array shift()
La méthode shift() supprime le premier élément du tableau et "décale" tous les autres éléments vers un index inférieur.
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.shift(); La méthode shift() renvoie la valeur qui a été "shifted out" :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
let fruit = fruits.shift(); JavaScript Array unshift()
La méthode unshift() ajoute un nouvel élément à un tableau (au début), et "décale" les éléments plus anciens :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.unshift("Citron"); La méthode unshift() renvoie la nouvelle longueur du tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.unshift("Citron"); Changer des éléments
Les éléments du tableau sont accessibles en utilisant leur numéro d'index :
Les index des tableaux commencent à 0 :
[0] est le premier élément du tableau
[1] est le deuxième
[2] est le troisième ...
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits[0] = "Kiwi"; Longueur du tableau JavaScript
La propriété length fournit un moyen facile d'ajouter un nouvel élément à un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits[fruits.length] = "Kiwi"; Array.isArray()
ECMAScript 5 (JavaScript 2009) a ajouté la nouvelle méthode Array.isArray() à JavaScript :
Exemple
Array.isArray(fruits); JavaScript Array delete()
Avertissement !
L'utilisation de delete() laisse des trous undefined dans le tableau.
Utilisez pop() ou shift() à la place.
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
delete fruits[0]; Fusionner des tableaux (Concaténer)
Dans les langages de programmation, la concaténation signifie joindre des chaînes bout à bout.
La concaténation de "neige" et "boule" donne "boule de neige".
La concaténation de tableaux signifie joindre des tableaux bout à bout.
JavaScript Array concat()
La méthode concat() crée un nouveau tableau en fusionnant (concaténant) des tableaux existants :
Exemple (Fusionner deux tableaux)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys); Note
La méthode concat() ne change pas les tableaux existants. Elle renvoie toujours un nouveau tableau.
La méthode concat() peut prendre n'importe quel nombre d'arguments de tableau.
Exemple (Fusionner trois tableaux)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3); La méthode concat() peut également prendre des chaînes comme arguments :
Exemple (Fusionner un tableau avec des valeurs)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); Array copyWithin()
La méthode copyWithin() copie les éléments d'un tableau à une autre position dans un tableau :
Exemples
Copier à l'index 2, tous les éléments de l'index 0 :
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.copyWithin(2, 0); Copier à l'index 2, les éléments de l'index 0 à 2 :
const fruits = ["Banane", "Orange", "Pomme", "Mangue", "Kiwi"];
fruits.copyWithin(2, 0, 2); Note
La méthode copyWithin() écrase les valeurs existantes.
La méthode copyWithin() n'ajoute pas d'éléments au tableau.
La méthode copyWithin() ne change pas la longueur du tableau.
Aplatir un tableau
Aplatir un tableau est le processus de réduction de la dimensionnalité d'un tableau.
Aplatir est utile lorsque vous souhaitez convertir un tableau multidimensionnel en un tableau unidimensionnel.
JavaScript Array flat()
ES2019 a introduit la méthode Array flat().
La méthode flat() crée un nouveau tableau avec des éléments de sous-tableau concaténés à une profondeur spécifiée.
Exemple
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat(); Support des navigateurs
flat() est une fonctionnalité ECMAScript 2019 .
ES2019 est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Avr 2018 | Jan 2020 | Juin 2018 | Sep 2018 | Mai 2018 |
JavaScript Array flatMap()
ES2019 a ajouté la méthode Array flatMap() à JavaScript.
La méthode flatMap() mappe d'abord tous les éléments d'un tableau, puis crée un nouveau tableau en aplatissant le tableau.
Exemple
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]); Support des navigateurs
flatMap() est une fonctionnalité ECMAScript 2019 .
ES2019 est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Avr 2018 | Jan 2020 | Juin 2018 | Sep 2018 | Mai 2018 |
Splicing et Slicing des tableaux
La méthode splice() ajoute de nouveaux éléments à un tableau.
La méthode slice() extrait un morceau d'un tableau.
JavaScript Array splice()
La méthode splice() peut être utilisée pour ajouter de nouveaux éléments à un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.splice(2, 0, "Citron", "Kiwi"); Le premier paramètre (2) définit la position où les nouveaux éléments doivent être ajoutés (insérés).
Le deuxième paramètre (0) définit combien d'éléments doivent être supprimés .
Le reste des paramètres ("Citron", "Kiwi") définit les nouveaux éléments à ajouter .
La méthode splice() renvoie un tableau avec les éléments supprimés :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.splice(2, 2, "Citron", "Kiwi"); Utiliser splice() pour supprimer des éléments
Avec un réglage astucieux des paramètres, vous pouvez utiliser splice() pour supprimer des éléments sans laisser de "trous" dans le tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.splice(0, 1); Le premier paramètre (0) définit la position où les nouveaux éléments doivent être ajoutés (insérés).
Le deuxième paramètre (1) définit combien d'éléments doivent être supprimés .
Le reste des paramètres est omis. Aucun nouvel élément ne sera ajouté.
JavaScript Array toSpliced()
ES2023 a ajouté la méthode Array toSpliced() comme un moyen sûr de découper un tableau sans altérer le tableau d'origine.
La différence entre la nouvelle méthode toSpliced() et l'ancienne méthode splice() est que la nouvelle méthode crée un nouveau tableau, en gardant le tableau d'origine inchangé, tandis que l'ancienne méthode modifiait le tableau d'origine.
Exemple
const months = ["Jan", "Fév", "Mar", "Avr"];
const spliced = months.toSpliced(0, 1); JavaScript Array slice()
La méthode slice() extrait un morceau d'un tableau dans un nouveau tableau :
Exemple
Extraire une partie d'un tableau à partir de l'élément 1 du tableau ("Orange") :
const fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
const citrus = fruits.slice(1); Note
La méthode slice() crée un nouveau tableau.
La méthode slice() ne supprime aucun élément du tableau source.
Exemple
Extraire une partie d'un tableau à partir de l'élément 3 du tableau ("Pomme") :
const fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
const citrus = fruits.slice(3); La méthode slice() peut prendre deux arguments comme slice(1, 3) .
La méthode sélectionne alors les éléments à partir de l'argument de début, et jusqu'à (mais sans inclure) l'argument de fin.
Exemple
const fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
const citrus = fruits.slice(1, 3); Si l'argument de fin est omis, comme dans les premiers exemples, la méthode slice() extrait le reste du tableau.
Exemple
const fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
const citrus = fruits.slice(2); toString() automatique
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 d'afficher un tableau.
Ces deux exemples produiront le même résultat :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
document.getElementById("demo").innerHTML = fruits.toString(); Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
document.getElementById("demo").innerHTML = fruits; Note
Tous les objets JavaScript ont une méthode toString().
Recherche dans les tableaux
La recherche dans les tableaux est couverte dans le prochain chapitre de ce tutoriel.
Tri des tableaux
Le tri des tableaux couvre les méthodes utilisées pour trier les tableaux.
Itération des tableaux
L'itération des tableaux couvre les méthodes qui opèrent sur tous les éléments du tableau.