Array

Description

En JavaScript, les tableaux ne sont pas des primitives, mais des objets Array avec les caractristiques principales suivantes :

• Les tableaux JavaScript sont redimensionnables et peuvent contenir un mlange de diffrents types de donnes. (Si ces caractristiques ne conviennent pas, utilisez plutt les tableaux typs.)
• Les tableaux JavaScript ne sont pas des tableaux associatifs : les lments d'un tableau ne peuvent pas tre accds avec des chanes arbitraires comme index, mais uniquement avec des entiers non ngatifs (ou leur forme en chane de caractres correspondante).
• Les tableaux JavaScript sont indexs partir de zro : le premier lment d'un tableau a pour indice 0, le second 1, etc. et le dernier lment est la position donne par la proprit length du tableau moins 1.
• Les oprations de copie de tableau JavaScript crent des copies superficielles. (Toutes les oprations de copie standard intgres avec n'importe quel objet JavaScript crent des copies superficielles, et non des copies profondes.)

Indices de tableau

Les objets Array ne peuvent pas utiliser de chanes arbitraires comme indices d'lments (comme dans un tableau associatif), mais doivent utiliser des entiers non ngatifs (ou leur forme en chane de caractres). Dfinir ou accder un lment via une valeur non entire ne dfinira ni ne rcuprera un lment de la liste du tableau, mais dfinira ou accdera une variable associe la collection de proprits de l'objet de ce tableau. Les proprits d'objet du tableau et la liste des lments du tableau sont spares, et les oprations de parcours et de modification du tableau ne s'appliquent pas ces proprits nommes.

Les lments d'un tableau sont des proprits d'objet de la mme manire que toString est une proprit (plus prcisment, toString() est une mthode). Cependant, essayer d'accder un lment d'un tableau comme suit provoque une erreur de syntaxe, car le nom de la proprit n'est pas valide :

arr.0; // erreur de syntaxe

La syntaxe JavaScript exige que les proprits commenant par un chiffre soient accdes en utilisant la notation avec crochets plutt que la notation pointe. Il est aussi possible de mettre des guillemets autour des indices de tableau (par exemple, annees['2'] au lieu de annees[2]), mais ce n'est gnralement pas ncessaire.

Le 2 dans annees[2] est converti en chane de caractres par le moteur JavaScript via une conversion implicite avec toString. Ainsi, '2' et '02' font rfrence deux emplacements diffrents dans l'objet annees, et l'exemple suivant peut donc renvoyer true :

console.log(annees["2"] !== annees["02"]);

Seul annees['2'] est un vritable indice de tableau. annees['02'] est une proprit de chane arbitraire qui ne sera pas parcourue lors de l'itration sur le tableau.

Relation entre length et les proprits numriques

La proprit length d'un tableau JavaScript et les proprits numriques sont lies.

Plusieurs mthodes natives de tableau (par exemple, join(), slice(), indexOf(), etc.) tiennent compte de la valeur de la proprit length du tableau lorsqu'elles sont appeles.

D'autres mthodes (par exemple, push(), splice(), etc.) modifient galement la proprit length du tableau.

const fruits = [];
fruits.push("banane", "pomme", "peche");
console.log(fruits.length); // 3

Lorsque l'on dfinit une proprit sur un tableau JavaScript, si la proprit est un indice de tableau valide et que cet indice est en dehors des limites actuelles du tableau, le moteur mettra jour la proprit length du tableau en consquence :

fruits[5] = "mangue";
console.log(fruits[5]); // 'mangue'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

Augmenter la valeur de length tend le tableau en ajoutant des emplacements vides sans crer de nouveaux lments mme pas undefined.

fruits.length = 10;
console.log(fruits); // ['banane', 'pomme', 'peche', empty x 2, 'mangue', empty x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
console.log(fruits[8]); // undefined

Diminuer la valeur de la proprit length supprime les lments.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Pour plus d'explications, voir la page length.

Mthodes de tableau et emplacements vides

Les mthodes de tableau ont des comportements diffrents lorsqu'elles rencontrent des emplacements vides dans les tableaux creux. En gnral, les mthodes plus anciennes (par exemple, forEach) traitent les emplacements vides diffremment des indices contenant undefined.

Les mthodes qui traitent spcialement les emplacements vides incluent : concat(), copyWithin(), every(), filter(), flat(), flatMap(), forEach(), indexOf(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), slice(), some(), sort() et splice(). Les mthodes d'itration comme forEach ne visitent pas du tout les emplacements vides. D'autres mthodes, comme concat, copyWithin, etc., prservent les emplacements vides lors de la copie, donc le tableau reste creux.

const couleurs = ["rouge", "jaune", "bleu"];
couleurs[5] = "violet";
couleurs.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});
// Rsultat :
// 0: rouge
// 1: jaune
// 2: bleu
// 5: violet

couleurs.reverse(); // ['violet', empty  2, 'bleu', 'jaune', 'rouge']

Les mthodes plus rcentes (par exemple, keys) ne traitent pas spcialement les emplacements vides et les considrent comme contenant undefined. Les mthodes qui assimilent les emplacements vides des lments undefined incluent : entries(), fill(), find(), findIndex(), findLast(), findLastIndex(), includes(), join(), keys(), toLocaleString(), toReversed(), toSorted(), toSpliced(), values() et with().

const couleurs = ["rouge", "jaune", "bleu"];
couleurs[5] = "violet";
const iterateur = couleurs.keys();
for (const key of iterateur) {
  console.log(`${key}: ${couleurs[key]}`);
}
// Rsultat
// 0: rouge
// 1: jaune
// 2: bleu
// 3: undefined
// 4: undefined
// 5: violet

const nouvellesCouleurs = couleurs.toReversed(); // ['violet', undefined, undefined, 'bleu', 'jaune', 'rouge']

Mthodes de copie et mthodes de mutation

Certaines mthodes ne modifient pas le tableau existant sur lequel la mthode a t appele, mais renvoient un nouveau tableau. Elles le font en construisant d'abord un nouveau tableau, puis en le remplissant avec les lments. La copie se fait toujours de manire superficielle la mthode ne copie jamais au-del du tableau initialement cr. Les lments du ou des tableaux d'origine sont copis dans le nouveau tableau comme suit :

• Objets : la rfrence de l'objet est copie dans le nouveau tableau. Le tableau d'origine et le nouveau tableau font rfrence au mme objet. Ainsi, si un objet rfrenc est modifi, les changements sont visibles dans les deux tableaux.
• Types primitifs comme les chanes de caractres, les nombres et les boolens (pas les objets String, Number et Boolean) : leurs valeurs sont copies dans le nouveau tableau.

D'autres mthodes modifient le tableau sur lequel la mthode a t appele, auquel cas leur valeur de retour diffre selon la mthode : parfois une rfrence au mme tableau, parfois la longueur du nouveau tableau.

Les mthodes suivantes crent de nouveaux tableaux en accdant this.constructor[Symbol.species] pour dterminer le constructeur utiliser : concat(), filter(), flat(), flatMap(), map(), slice(), et splice() (pour construire le tableau des lments supprims qui est renvoy).

Les mthodes suivantes crent toujours de nouveaux tableaux avec le constructeur de base Array : toReversed(), toSorted(), toSpliced(), et with().

Le tableau suivant liste les mthodes qui modifient le tableau d'origine et leur alternative sans mutation :

Un moyen simple de transformer une mthode avec mutation en alternative sans mutation est d'utiliser la syntaxe de l'oprateur de propagation ou slice() pour crer d'abord une copie :

arr.copyWithin(0, 1, 2); // modifie arr
const arr2 = arr.slice().copyWithin(0, 1, 2); // ne modifie pas arr
const arr3 = [...arr].copyWithin(0, 1, 2); // ne modifie pas arr

Mthodes itratives

De nombreuses mthodes de tableau prennent une fonction de rappel (callback en anglais) en argument. Cette fonction de rappel est appele squentiellement et au maximum une fois pour chaque lment du tableau, et la valeur de retour de la fonction de rappel est utilise pour dterminer la valeur de retour de la mthode. Elles partagent toutes la mme signature :

method(callbackFn, thisArg)

O callbackFn prend trois arguments :

element

L'lment courant trait dans le tableau.

index

L'indice de l'lment courant trait dans le tableau.

array

Le tableau sur lequel la mthode a t appele.

Ce que callbackFn doit retourner dpend de la mthode de tableau appele.

L'argument thisArg (par dfaut undefined) sera utilis comme valeur de this lors de l'appel de callbackFn. La valeur de this effectivement observable par callbackFn est dtermine selon les rgles habituelles : si callbackFn n'est pas stricte, les valeurs primitives de this sont converties en objets, et undefined/null est remplac par globalThis. L'argument thisArg est sans effet pour toute fonction de rappel dfinie avec une fonction flche, car les fonctions flches n'ont pas leur propre liaison this.

L'argument array pass callbackFn est surtout utile si vous souhaitez lire un autre indice pendant l'itration, car vous n'avez pas toujours une variable existante qui fait rfrence au tableau courant. En gnral, il ne faut pas modifier le tableau pendant l'itration (voir modification du tableau initial dans les mthodes itratives), mais vous pouvez aussi utiliser cet argument cette fin. L'argument array n'est pas le tableau en cours de construction dans le cas de mthodes comme map(), filter() et flatMap() il n'est pas possible d'accder au tableau en cours de construction depuis la fonction de rappel.

Toutes les mthodes itratives sont copiantes et gnriques, bien qu'elles se comportent diffremment avec les emplacements vides.

Les mthodes suivantes sont itratives : every(), filter(), find(), findIndex(), findLast(), findLastIndex(), flatMap(), forEach(), map() et some().

En particulier, every(), find(), findIndex(), findLast(), findLastIndex() et some() n'invoquent pas toujours callbackFn sur chaque lment elles arrtent l'itration ds que la valeur de retour est dtermine.

Les mthodes reduce() et reduceRight() prennent aussi une fonction de rappel et l'excutent au maximum une fois pour chaque lment du tableau, mais elles ont des signatures lgrement diffrentes des mthodes itratives classiques (par exemple, elles n'acceptent pas thisArg).

La mthode sort() prend aussi une fonction de rappel, mais ce n'est pas une mthode itrative. Elle modifie le tableau en place, n'accepte pas thisArg et peut invoquer la fonction de rappel plusieurs fois sur un mme indice.

Les mthodes itratives parcourent le tableau comme suit (de nombreux dtails techniques sont omis) :

function method(callbackFn, thisArg) {
  const length = this.length;
  for (let i = 0; i < length; i++) {
    if (i in this) {
      const result = callbackFn.call(thisArg, this[i], i, this);
      // Faire quelque chose avec result&nbsp;; peut-tre retourner tt
    }
  }
}

noter :

1. Toutes les mthodes ne font pas le test i in this. Les mthodes find, findIndex, findLast et findLastIndex ne le font pas, mais les autres oui.
2. La valeur de length est mmorise avant le dbut de la boucle. Cela affecte la gestion des insertions et suppressions pendant l'itration (voir modification du tableau initial dans les mthodes itratives).
3. La mthode ne mmorise pas le contenu du tableau, donc si un indice est modifi pendant l'itration, la nouvelle valeur peut tre observe.
4. Le code ci-dessus parcourt le tableau dans l'ordre croissant des indices. Certaines mthodes parcourent dans l'ordre dcroissant (for (let i = length - 1; i >= 0; i--)) : reduceRight(), findLast() et findLastIndex().
5. reduce et reduceRight ont des signatures lgrement diffrentes et ne commencent pas toujours au premier/dernier lment.

Mthodes de tableau gnriques

Les mthodes de tableau sont toujours gnriques elles n'accdent aucune donne interne de l'objet tableau. Elles accdent uniquement aux lments du tableau via la proprit length et les lments indexs. Cela signifie qu'elles peuvent aussi tre appeles sur des objets ressemblant des tableaux.

const objetRessemblantATableau = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(objetRessemblantATableau, "+")); // 'a+b'

Normalisation de la proprit length

La proprit length est convertie en entier puis borne entre 0 et 253 - 1. NaN devient 0, donc mme si length n'est pas prsente ou vaut undefined, elle se comporte comme si elle valait 0.

Le langage vite d'attribuer length une valeur entire non sre. Toutes les mthodes natives lveront une TypeError si length doit tre suprieure 253 - 1. Cependant, comme la proprit length des tableaux lve une erreur si elle dpasse 232 - 1, ce seuil n'est gnralement pas atteint sauf si la mthode est appele sur un objet qui n'est pas un tableau.

Array.prototype.flat.call({}); // []

Certaines mthodes de tableau modifient la proprit length de l'objet tableau. Elles fixent toujours la valeur aprs normalisation, donc length est toujours un entier au final.

const a = { length: 0.7 };
Array.prototype.push.call(a);
console.log(a.length); // 0

Objets ressemblant des tableaux

Le terme objet ressemblant un tableau dsigne tout objet qui ne lve pas d'erreur lors du processus de conversion de length dcrit ci-dessus. En pratique, un tel objet est cens avoir effectivement une proprit length et des lments indexs dans l'intervalle de 0 length - 1. (S'il ne possde pas tous les indices, il sera fonctionnellement quivalent un tableau creux.) Tout indice entier infrieur zro ou suprieur length - 1 est ignor lorsqu'une mthode de tableau opre sur un objet ressemblant un tableau.

De nombreux objets du DOM sont ressemblant des tableaux par exemple, NodeList et HTMLCollection. L'objet arguments est aussi ressemblant un tableau. Vous pouvez appeler des mthodes de tableau sur eux mme s'ils ne possdent pas ces mthodes eux-mmes.

function f() {
  console.log(Array.prototype.join.call(arguments, "+"));
}

f("a", "b"); // 'a+b'

Constructeur

Array()

Cre un nouvel objet Array.

Proprits statiques

Array[Symbol.species]

Retourne le constructeur Array.

Mthodes statiques

Array.from()

Cette mthode permet de crer une nouvelle instance d'Array partir d'un objet semblable un tableau ou d'un itrable.

Array.isArray()

Cette mthode renvoie true si la variable est un tableau, false sinon.

Array.of()

Cette mthode permet de crer une nouvelle instance d'Array partir d'un nombre variable d'arguments (peu importe la quantit ou le type des arguments utiliss).

Proprits d'instance

Ces proprits sont dfinies sur Array.prototype et partages par toutes les instances de Array.

Array.prototype.constructor

La fonction constructeur qui a cr l'instance de l'objet. Pour les instances de Array, la valeur initiale est le constructeur Array.

Array.prototype[Symbol.unscopables]

Contient les noms de proprits qui n'taient pas inclus dans la norme ECMAScript avant la version ES2015 et qui sont ignors pour l'association d'instructions with.

Ces proprits sont des proprits propres chaque instance de Array.

length

Reflte le nombre d'lments dans un tableau.

Mthodes d'instance

Array.prototype.at()

Retourne l'lment du tableau l'indice indiqu. Les entiers ngatifs sont accepts en argument et, dans ce cas, la recherche de l'lment se fait depuis la fin du tableau.

Array.prototype.concat()

Retourne un nouveau tableau qui est le tableau courant, joint avec d'autres tableaux ou valeurs.

Array.prototype.copyWithin()

Copie une squence d'lment d'un tableau au sein du tableau courant.

Array.prototype.entries()

Retourne un nouvel itrateur de tableau qui contient les paires de cls/valeurs pour chaque indice dans le tableau.

Array.prototype.every()

Retourne true si chaque lment du tableau vrifie la condition fixe par la fonction passe en argument.

Array.prototype.fill()

Remplit tous les lments d'un tableau partir d'un indice de dbut jusqu' un indice de fin avec une valeur statique.

Array.prototype.filter()

Retourne un nouveau tableau qui contient tous les lments du tableau courant pour lesquels la fonction de filtre passe en argument a renvoy true.

Array.prototype.find()

Retourne l'lment trouv dans le tableau si un des lments satisfait la condition fixe par la fonction passe en paramtre. Retourne undefined si aucun lment correspondant n'est trouv.

Array.prototype.findIndex()

Retourne l'indice de l'lment trouv dans le tableau si un lment du tableau satisfait la condition fixe par la fonction passe en argument ou -1 si aucun lment n'est trouv.

Array.prototype.flat()

Retourne un nouveau tableau avec l'ensemble des sous-lments concatns rcursivement dans le tableau jusqu' une profondeur indique.

Array.prototype.flatMap()

Retourne un nouveau tableau form en appliquant une fonction de rappel donne chaque lment du tableau puis en  aplatissant  le tableau d'un niveau.

Array.prototype.forEach()

Appelle une fonction pour chaque lment du tableau.

Array.prototype.includes()

Dtermine si le tableau contient une valeur et renvoie true ou false selon le cas de figure.

Array.prototype.indexOf()

Retourne l'indice le plus petit d'un lment du tableau gal la valeur passe en argument ou -1 si aucun lment n'est trouv.

Array.prototype.join()

Fusionne tous les lments du tableau en une chane de caractres.

Array.prototype.keys()

Retourne un nouvel itrateur de tableau qui contient les cls de chaque indice du tableau.

Array.prototype.lastIndexOf()

Retourne le plus grand indice d'un lment du tableau gal la valeur passe en argument ou -1 si aucun lment n'est trouv.

Array.prototype.map()

Retourne un nouveau tableau contenant les rsultats de l'appel de la fonction passe en argument sur chaque lment du tableau.

Array.prototype.pop()

Retire le dernier lment du tableau et renvoie cet lment.

Array.prototype.push()

Ajoute un ou plusieurs lments la fin du tableau et renvoie la nouvelle longueur (length) du tableau.

Array.prototype.reduce()

Applique une fonction sur un accumulateur et chaque valeur du tableau (de gauche droite) afin de rduire le tableau une seule valeur.

Array.prototype.reduceRight()

Applique une fonction sur un accumulateur et chaque valeur du tableau (de droite gauche) afin de rduire le tableau une seule valeur.

Array.prototype.reverse()

Inverse l'ordre des lments du tableau mme le tableau (le premier lment devient le dernier, le dernier devient le premier, etc.).

Array.prototype.shift()

Retire le premier lment du tableau et renvoie cet lment.

Array.prototype.slice()

Extrait une section du tableau courant et renvoie un nouveau tableau.

Array.prototype.some()

Retourne true si au moins un des lments du tableau satisfait la condition fournie par la fonction passe en paramtre.

Array.prototype.sort()

Trie les lments du tableau mme le tableau et renvoie le tableau.

Array.prototype.splice()

Ajoute et/ou retire des lments du tableau.

Array.prototype.toLocaleString()

Retourne une chane de caractres localise qui reprsente le tableau et ses lments. Cette mthode surcharge la mthode Object.prototype.toLocaleString().

Array.prototype.toReversed()

Retourne un nouveau tableau avec les lments dans l'ordre invers, sans modifier le tableau d'origine.

Array.prototype.toSorted()

Retourne un nouveau tableau avec les lments tris par ordre croissant, sans modifier le tableau d'origine.

Array.prototype.toSpliced()

Retourne un nouveau tableau avec certains lments supprims et/ou remplacs un indice donn, sans modifier le tableau d'origine.

Array.prototype.toString()

Retourne une chane de caractres qui reprsente le tableau et ses lments. Cette mthode surcharge la mthode Object.prototype.toString().

Array.prototype.unshift()

Ajoute un ou plusieurs lments l'avant du tableau et renvoie la nouvelle longueur du tableau.

Array.prototype.values()

Retourne un nouvel itrateur de tableau qui contient les valeurs pour chaque indice du tableau.

Array.prototype[Symbol.iterator]()

Un alias de la mthode values() par dfaut.

Exemples

Cette section fournit quelques exemples d'oprations courantes sur les tableaux en JavaScript.

Crer un tableau

Cet exemple montre trois faons de crer un nouveau tableau : d'abord en utilisant la notation littrale de tableau, puis en utilisant le constructeur Array(), et enfin en utilisant String.prototype.split() pour construire le tableau partir d'une chane de caractres.

// Tableau 'fruits' cr avec la notation littrale.
const fruits = ["Pomme", "Banane"];
console.log(fruits.length);
// 2

// Tableau 'fruits2' cr avec le constructeur Array().
const fruits2 = new Array("Pomme", "Banane");
console.log(fruits2.length);
// 2

// Tableau 'fruits3' cr avec String.prototype.split().
const fruits3 = "Pomme, Banane".split(", ");
console.log(fruits3.length);
// 2

Crer une chane partir d'un tableau

Cet exemple utilise la mthode join() pour crer une chane partir du tableau fruits.

const fruits = ["Pomme", "Banane"];
const fruitsString = fruits.join(", ");
console.log(fruitsString);
// "Pomme, Banane"

Accder un lment d'un tableau par son indice

Cet exemple montre comment accder aux lments du tableau fruits en spcifiant l'indice de leur position dans le tableau.

const fruits = ["Pomme", "Banane"];

// L'indice du premier lment d'un tableau est toujours 0.
fruits[0]; // Pomme

// L'indice du deuxime lment d'un tableau est toujours 1.
fruits[1]; // Banane

// L'indice du dernier lment d'un tableau est toujours gal  la longueur du tableau moins un.
fruits[fruits.length - 1]; // Banane

// Utiliser un indice suprieur  la longueur du tableau retourne 'undefined'.
fruits[99]; // undefined

Rechercher l'indice d'un lment dans un tableau

Cet exemple utilise la mthode indexOf() pour trouver la position (indice) de la chane de caractres "Banane" dans le tableau fruits.

const fruits = ["Pomme", "Banane"];
console.log(fruits.indexOf("Banane"));
// 1

Vrifier si un tableau contient un certain lment

Cet exemple montre deux faons de vrifier si le tableau fruits contient "Banane" et "Cerise" : d'abord avec la mthode includes(), puis avec la mthode indexOf() pour tester si l'indice retourn n'est pas -1.

const fruits = ["Pomme", "Banane"];

fruits.includes("Banane"); // true
fruits.includes("Cerise"); // false

// Si indexOf() ne retourne pas -1, le tableau contient l'lment donn.
fruits.indexOf("Banane") !== -1; // true
fruits.indexOf("Cerise") !== -1; // false

Ajouter un lment un tableau

Cet exemple utilise la mthode push() pour ajouter une nouvelle chane de caractres au tableau fruits.

const fruits = ["Pomme", "Banane"];
const nouvelleLongueur = fruits.push("Orange");
console.log(fruits);
// ["Pomme", "Banane", "Orange"]
console.log(nouvelleLongueur);
// 3

Retirer le dernier lment d'un tableau

Cet exemple utilise la mthode pop() pour retirer le dernier lment du tableau fruits.

const fruits = ["Pomme", "Banane", "Orange"];
const elementRetire = fruits.pop();
console.log(fruits);
// ["Pomme", "Banane"]
console.log(elementRetire);
// Orange

Retirer plusieurs lments la fin d'un tableau

Cet exemple utilise la mthode splice() pour retirer les 3 derniers lments du tableau fruits.

const fruits = ["Pomme", "Banane", "Fraise", "Mangue", "Cerise"];
const debut = -3;
const elementsRetires = fruits.splice(debut);
console.log(fruits);
// ["Pomme", "Banane"]
console.log(elementsRetires);
// ["Fraise", "Mangue", "Cerise"]

Tronquer un tableau ses N premiers lments

Cet exemple utilise la mthode splice() pour tronquer le tableau fruits ses 2 premiers lments.

const fruits = ["Pomme", "Banane", "Fraise", "Mangue", "Cerise"];
const debut = 2;
const elementsRetires = fruits.splice(debut);
console.log(fruits);
// ["Pomme", "Banane"]
console.log(elementsRetires);
// ["Fraise", "Mangue", "Cerise"]

Retirer le premier lment d'un tableau

Cet exemple utilise la mthode shift() pour retirer le premier lment du tableau fruits.

const fruits = ["Pomme", "Banane"];
const elementRetire = fruits.shift();
console.log(fruits);
// ["Banane"]
console.log(elementRetire);
// Pomme

Retirer plusieurs lments au dbut d'un tableau

Cet exemple utilise la mthode splice() pour retirer les 3 premiers lments du tableau fruits.

const fruits = ["Pomme", "Fraise", "Cerise", "Banane", "Mangue"];
const debut = 0;
const nombreASupprimer = 3;
const elementsRetires = fruits.splice(debut, nombreASupprimer);
console.log(fruits);
// ["Banane", "Mangue"]
console.log(elementsRetires);
// ["Pomme", "Fraise", "Cerise"]

Ajouter un nouvel lment en premire position d'un tableau

Cet exemple utilise la mthode unshift() pour ajouter, l'indice 0, un nouvel lment au tableau fruits il devient alors le premier lment du tableau.

const fruits = ["Banane", "Mangue"];
const nouvelleLongueur = fruits.unshift("Fraise");
console.log(fruits);
// ["Fraise", "Banane", "Mangue"]
console.log(nouvelleLongueur);
// 3

Retirer un lment par son indice

Cet exemple utilise la mthode splice() pour retirer la chane de caractres "Banane" du tableau fruits en spcifiant la position de l'indice de "Banane".

const fruits = ["Fraise", "Banane", "Mangue"];
const debut = fruits.indexOf("Banane");
const nombreASupprimer = 1;
const elementsRetires = fruits.splice(debut, nombreASupprimer);
console.log(fruits);
// ["Fraise", "Mangue"]
console.log(elementsRetires);
// ["Banane"]

Retirer plusieurs lments par leur indice

Cet exemple utilise la mthode splice() pour retirer les chanes de caractres "Banane" et "Fraise" du tableau fruits en spcifiant la position de l'indice de "Banane" et le nombre total d'lments retirer.

const fruits = ["Pomme", "Banane", "Fraise", "Mangue"];
const debut = 1;
const nombreASupprimer = 2;
const elementsRetires = fruits.splice(debut, nombreASupprimer);
console.log(fruits);
// ["Pomme", "Mangue"]
console.log(elementsRetires);
// ["Banane", "Fraise"]

Remplacer plusieurs lments dans un tableau

Cet exemple utilise la mthode splice() pour remplacer les 2 derniers lments du tableau fruits par de nouveaux lments.

const fruits = ["Pomme", "Banane", "Fraise"];
const debut = -2;
const nombreASupprimer = 2;
const elementsRetires = fruits.splice(
  debut,
  nombreASupprimer,
  "Mangue",
  "Cerise",
);
console.log(fruits);
// ["Pomme", "Mangue", "Cerise"]
console.log(elementsRetires);
// ["Banane", "Fraise"]

Itrer sur un tableau

Cet exemple utilise une boucle for...of pour parcourir le tableau fruits et afficher chaque lment dans la console.

const fruits = ["Pomme", "Mangue", "Cerise"];
for (const fruit of fruits) {
  console.log(fruit);
}
// Pomme
// Mangue
// Cerise

Mais for...of n'est qu'une des nombreuses faons d'itrer sur un tableau : pour d'autres mthodes, voir Boucles et itration, ainsi que la documentation des mthodes every(), filter(), flatMap(), map(), reduce() et reduceRight() et voir l'exemple suivant qui utilise la mthode forEach().

Appeler une fonction sur chaque lment d'un tableau

Cet exemple utilise la mthode forEach() pour appeler une fonction sur chaque lment du tableau fruits ; la fonction affiche chaque lment dans la console, ainsi que son indice.

const fruits = ["Pomme", "Mangue", "Cerise"];
fruits.forEach((element, indice, tableau) => {
  console.log(element, indice);
});
// Pomme 0
// Mangue 1
// Cerise 2

Fusionner plusieurs tableaux

Cet exemple utilise la mthode concat() pour fusionner le tableau fruits avec un tableau autresFruits et produire un nouveau tableau fruitsCombines. Remarquez que fruits et autresFruits restent inchangs.

const fruits = ["Pomme", "Banane", "Fraise"];
const autresFruits = ["Mangue", "Cerise"];
const fruitsCombines = fruits.concat(autresFruits);
console.log(fruitsCombines);
// ["Pomme", "Banane", "Fraise", "Mangue", "Cerise"]

// Le tableau 'fruits' reste inchang.
console.log(fruits);
// ["Pomme", "Banane", "Fraise"]

// Le tableau 'autresFruits' reste aussi inchang.
console.log(autresFruits);
// ["Mangue", "Cerise"]

Copier un tableau

Cet exemple montre trois faons de crer un nouveau tableau partir du tableau existant fruits : d'abord en utilisant la syntaxe de l'oprateur de propagation, puis en utilisant la mthode from(), et enfin en utilisant la mthode slice().

const fruits = ["Strawberry", "Mango"];

// Crer une copie en utilisant la syntaxe de l'oprateur de propagation.
const fruitsCopy = [...fruits];
// ["Strawberry", "Mango"]

// Crer une copie en utilisant la mthode from().
const fruitsCopy2 = Array.from(fruits);
// ["Strawberry", "Mango"]

// Crer une copie en utilisant la mthode slice().
const fruitsCopy3 = fruits.slice();
// ["Strawberry", "Mango"]

Toutes les oprations natives de copie de tableau (syntaxe de l'oprateur de propagation, Array.from(), Array.prototype.slice(), et Array.prototype.concat()) crent des copies superficielles. Si vous souhaitez plutt une copie profonde d'un tableau, vous pouvez utiliser JSON.stringify() pour convertir le tableau en chane JSON, puis JSON.parse() pour convertir la chane en un nouveau tableau totalement indpendant du tableau d'origine.

const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

Vous pouvez galement crer des copies profondes en utilisant la mthode structuredClone(), qui a l'avantage de permettre aux objets transfrables de la source d'tre transfrs vers la nouvelle copie, plutt que simplement clons.

Enfin, il est important de comprendre qu'affecter un tableau existant une nouvelle variable ne cre pas une copie du tableau ni de ses lments. La nouvelle variable n'est qu'une rfrence, ou alias, vers le tableau d'origine ; c'est--dire que le nom du tableau d'origine et le nom de la nouvelle variable sont simplement deux noms pour exactement le mme objet (et seront donc toujours strictement quivalents). Ainsi, si vous modifiez la valeur du tableau d'origine ou celle de la nouvelle variable, l'autre changera aussi :

const fruits = ["Strawberry", "Mango"];
const fruitsAlias = fruits;
// 'fruits' et 'fruitsAlias' sont le mme objet, strictement quivalents.
fruits === fruitsAlias; // true
// Toute modification du tableau 'fruits' modifie aussi 'fruitsAlias'.
fruits.unshift("Apple", "Banana");
console.log(fruits);
// ['Apple', 'Banana', 'Strawberry', 'Mango']
console.log(fruitsAlias);
// ['Apple', 'Banana', 'Strawberry', 'Mango']

Crer un tableau deux dimensions

L'exemple suivant cre un chiquier sous forme de tableau deux dimensions de chanes de caractres. Le premier coup est effectu en copiant le 'p' de board[6][4] vers board[4][4]. L'ancienne position [6][4] est rendue vide.

const board = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"],
];

console.log(`${board.join("\n")}\n\n`);

// Avancer le pion du roi de 2 cases
board[4][4] = board[6][4];
board[6][4] = " ";
console.log(board.join("\n"));

Voici le rsultat :

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Utiliser un tableau pour tabuler un ensemble de valeurs

const values = [];
for (let x = 0; x < 10; x++) {
  values.push([2 ** x, 2 * x ** 2]);
}
console.table(values);

Ce qui donne

// La premire colonne est l'indice
0  1    0
1  2    2
2  4    8
3  8    18
4  16   32
5  32   50
6  64   72
7  128  98
8  256  128
9  512  162

Crer un tableau partir du rsultat d'une correspondance

Le rsultat d'une correspondance entre un RegExp et une chane peut crer un tableau JavaScript qui possde des proprits et des lments fournissant des informations sur la correspondance. Un tel tableau est retourn par RegExp.prototype.exec() et String.prototype.match().

Par exemple :

// Correspond  un 'd' suivi d'un ou plusieurs 'b', suivi d'un 'd'
// Mmorise les 'b' correspondants et le 'd' suivant
// Ignore la casse

const myRe = /d(b+)(d)/i;
const execResult = myRe.exec("cdbBdbsbz");

console.log(execResult.input); // 'cdbBdbsbz'
console.log(execResult.index); // 1
console.log(execResult); // [ "dbBd", "bB", "d" ]

Pour plus d'informations sur le rsultat d'une correspondance, voir les pages RegExp.prototype.exec() et String.prototype.match().

Modification du tableau initial dans les mthodes itratives

Les mthodes itratives ne modifient pas le tableau sur lequel elles sont appeles, mais la fonction fournie en tant que callbackFn peut le faire. Le principe cl retenir est que seuls les indices entre 0 et arrayLength - 1 sont visits, o arrayLength est la longueur du tableau au moment o la mthode a t appele, mais l'lment pass au callback est la valeur au moment o l'indice est visit. Ainsi :

• callbackFn ne visitera aucun lment ajout au-del de la longueur initiale du tableau au dbut de l'appel de la mthode itrative.
• Les modifications des indices dj visits ne provoquent pas un nouvel appel de callbackFn sur ceux-ci.
• Si un lment existant mais pas encore visit du tableau est modifi par callbackFn, la valeur passe au callback sera celle au moment o cet lment est visit. Les lments supprims ne sont pas visits.

Les exemples suivants utilisent la mthode forEach, mais les autres mthodes qui parcourent les indices dans l'ordre croissant fonctionnent de la mme manire. Nous allons d'abord dfinir une fonction utilitaire :

function testSideEffect(effect) {
  const arr = ["e1", "e2", "e3", "e4"];
  arr.forEach((elem, index, arr) => {
    console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
    effect(arr, index);
  });
  console.log(`Final array: [${arr.join(", ")}]`);
}

La modification d'indices pas encore visits sera visible une fois l'indice atteint :

testSideEffect((arr, index) => {
  if (index + 1 < arr.length) arr[index + 1] += "*";
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2*, e3, e4], index: 1, elem: e2*
// array: [e1, e2*, e3*, e4], index: 2, elem: e3*
// array: [e1, e2*, e3*, e4*], index: 3, elem: e4*
// Final array: [e1, e2*, e3*, e4*]

La modification d'indices dj visits ne change pas le comportement de l'itration, mme si le tableau sera diffrent aprs :

testSideEffect((arr, index) => {
  if (index > 0) arr[index - 1] += "*";
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1*, e2, e3, e4], index: 2, elem: e3
// array: [e1*, e2*, e3, e4], index: 3, elem: e4
// Final array: [e1*, e2*, e3*, e4]

L'insertion de n lments des indices non encore visits et infrieurs la longueur initiale du tableau les fera tre visits. Les n derniers lments du tableau d'origine qui ont maintenant un indice suprieur la longueur initiale ne seront pas visits :

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 0, "new");
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, new, e3, e4], index: 2, elem: new
// array: [e1, e2, new, e3, e4], index: 3, elem: e3
// Final array: [e1, e2, new, e3, e4]
// e4 n'est pas visit car il a maintenant l'indice 4

L'insertion de n lments un indice suprieur la longueur initiale du tableau ne les fera pas tre visits :

testSideEffect((arr) => arr.push("new"));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4, new], index: 1, elem: e2
// array: [e1, e2, e3, e4, new, new], index: 2, elem: e3
// array: [e1, e2, e3, e4, new, new, new], index: 3, elem: e4
// Tableau final : [e1, e2, e3, e4, new, new, new, new]

L'insertion de n lments des indices dj visits ne les fera pas tre visits, mais dcale les lments restants de n vers l'arrire, donc l'indice courant et les n - 1 lments prcdents sont visits nouveau :

testSideEffect((arr, index) => arr.splice(index, 0, "new"));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [new, e1, e2, e3, e4], index: 1, elem: e1
// array: [new, new, e1, e2, e3, e4], index: 2, elem: e1
// array: [new, new, new, e1, e2, e3, e4], index: 3, elem: e1
// Tableau final : [new, new, new, new, e1, e2, e3, e4]
// e1 continue d'tre visit car il est continuellement dcal vers l'arrire

La suppression de n lments des indices non encore visits fait qu'ils ne seront plus visits. Comme le tableau a rtrci, les n dernires itrations visiteront des indices hors limites. Si la mthode ignore les indices inexistants (voir mthodes de tableau et trous), les _n* dernires itrations seront ignores ; sinon, elles recevront undefined :

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 1);
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, e4], index: 2, elem: e4
// Tableau final : [e1, e2, e4]
// Ne visite pas l'indice 3 car il est hors limites

//  comparer avec find(), qui traite les indices inexistants comme undefined :
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
  if (index === 1) arr.splice(2, 1);
  return false;
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, e4], index: 2, elem: e4
// array: [e1, e2, e4], index: 3, elem: undefined

La suppression de n lments des indices dj visits ne change pas le fait qu'ils ont t visits avant d'tre supprims. Comme le tableau a rtrci, les n lments suivants aprs l'indice courant sont ignors. Si la mthode ignore les indices inexistants, les n dernires itrations seront ignores ; sinon, elles recevront undefined :

testSideEffect((arr, index) => arr.splice(index, 1));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// Ne visite pas e2 car e2 a maintenant l'indice 0, dj visit
// array: [e2, e3, e4], index: 1, elem: e3
// Ne visite pas e4 car e4 a maintenant l'indice 1, dj visit
// Tableau final : [e2, e4]
// L'indice 2 est hors limites, donc non visit

//  comparer avec find(), qui traite les indices inexistants comme undefined :
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
  arr.splice(index, 1);
  return false;
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e2, e3, e4], index: 1, elem: e3
// array: [e2, e4], index: 2, elem: undefined
// array: [e2, e4], index: 3, elem: undefined

Pour les mthodes qui itrent dans l'ordre dcroissant des indices, l'insertion provoque le saut d'lments et la suppression fait que certains lments sont visits plusieurs fois. Modifiez le code ci-dessus pour observer les effets.

Spcifications

Compatibilit des navigateurs

Voir aussi

• Guide des collections indexes
• L'objet TypedArray
• L'objet ArrayBuffer