Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

L'objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de
haut-niveau (en termes de complexité homme-machine) semblables à des listes.

Les tableaux sont des objets semblables à des listes dont le prototype possède des
méthodes qui permettent de parcourir et de modifier le tableau. Ni la longueur ni le type
des éléments d'un tableau JavaScript sont fixés. Comme la longueur d'un tableau peut
varier à tout moment et que les données peuvent être stockées à des emplacements
qui ne sont pas nécessairement contigus, les tableaux JavaScript ne sont pas
forcément « pleins » / denses. Généralement, ces particularités sont appréciables mais
si elles ne correspondent pas à votre usage, vous pourriez vouloir utiliser les tableaux
typés.

Les tableaux ne peuvent pas utiliser de chaînes de caractères comme indices pour les
éléments (à la façon des tableaux associatifs ) mais doivent utiliser des entiers. Définir
une valeur ou tenter d'y accéder avec un indice non-entier via la notation entre crochet
(ou la notation avec le point) ne définira ou ne récupèrera pas la valeur mais définira ou
récupèrera une variable associée aux propriétés de l'objet formé par le tableau. Les
propriétés et les éléments d'un tableau sont distincts et les opérations de parcours et
de modification du tableau ne peuvent pas être appliquées à ces propriétés.

JS

let fruits = ["Apple", "Banana"];

console.log(fruits.length);
// 2

1 sur 15 04/05/2024 19:14

Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

JS

let first = fruits[0];

// Apple

let last = fruits[fruits.length - 1];

// Banana

JS

fruits.forEach(function (item, index, array) {

console.log(item, index);
});
// Apple 0
// Banana 1

JS

let newLength = fruits.push("Orange");

// ["Apple", "Banana", "Orange"]

JS

let last = fruits.pop(); // supprime Orange (à la fin)

// ["Apple", "Banana"];

JS

let first = fruits.shift(); // supprime Apple (au début)

// ["Banana"];

2 sur 15 04/05/2024 19:14

Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

JS

let newLength = fruits.unshift("Strawberry"); // ajoute au début

// ["Strawberry", "Banana"];

JS

fruits.push("Mango");
// ["Strawberry", "Banana", "Mango"]

let pos = fruits.indexOf("Banana");

// 1

JS

let removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos

// ["Strawberry", "Mango"]

JS

let vegetables = ["Cabbage", "Turnip", "Radish", "Carrot"];

console.log(vegetables);
// ["Cabbage", "Turnip", "Radish", "Carrot"]

let pos = 1,
n = 2;

let removedItems = vegetables.splice(pos, n);

// n définit le nombre d'éléments à supprimer,
// à partir de la position pos

console.log(vegetables);
// ["Cabbage", "Carrot"] (le tableau d'origine est changé)

console.log(removedItems);
// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
3 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

JS

let shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les

éléments de fruits
// ["Strawberry", "Mango"]

Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice
0 , et la position du dernier élément est donnée par length moins 1. Si on utilise un
indice en dehors de cet intervalle, le résultat sera undefined (sous réserve qu'aucune
propriété n'ait été ajoutée au préalable avec cet indice).

JS

let arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
console.log(arr[0]); // affiche "le premier élément"
console.log(arr[1]); // affiche "le deuxième élément"
console.log(arr[arr.length - 1]); // affiche "le dernier élément"

Les éléments d'un tableau sont des propriétés d'objets de la même manière que
toString est une propriété. Cependant, essayer d'accéder à un élément du tableau
comme suit renverra une erreur, car le nom de la propriété utilisé est invalide :

JS

console.log(arr.0); // erreur de syntaxe

Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux
propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est
nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si
pour un objet quelconque, on avait une propriété nommée ' 3d ', on ne pourra y faire
référence qu'en utilisant les crochets. Exemple :

JS

let années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];

console.log(années.0); // erreur de syntaxe

4 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...
console.log(années[0]); // fonctionne correctement

JS

renderer.3d.setTexture(model, "personnage.png"); // erreur de syntaxe

renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement

Dans cet exemple, on utilise des doubles quotes autour de 3d . On peut aussi utiliser les
doubles quotes pour accéder aux éléments d'un tableau (ex. : années["2"] au lieu de
années[2] ), mais ce n'est pas obligatoire. Dans l'instruction années[2] , le nombre sera
converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on
utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes,
et le fragment de code suivant renvoie donc true :

JS

console.log(années["2"] != années["02"]);

De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent
être consultées qu'en utilisant la syntaxe avec crochets :

JS

let promise = {
var: "text",
array: [1, 2, 3, 4],
};

console.log(promise["var"]);

length
La propriété length d'un tableau est liée aux propriétés numériques du tableau.
Plusieurs méthodes natives utilisent cette propriété : join() , slice() , indexOf() , etc.
D'autres méthodes comme push() et splice() modifient le tableau et la propriété
length .

JS

let fruits = [];

fruits.push("banane", "pomme", "pêche");
5 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

console.log(fruits.length); // 3

Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé
est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur
JavaScript mettra à jour la propriété length :

JS

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

On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux

éléments) :

JS

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

En revanche, si on diminue la valeur de length , cela supprimera des éléments :

JS

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

Pour plus d'informations sur le comportement de cette propriété, voir la page

Array.length .

Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut
créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent
des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce
aux méthodes RegExp.exec() , String.match() , et String.replace() . Pour mieux
6 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser

l'exemple et le tableau qui suivent :

JS

// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"

// Capture les "b" et le "d" qui suit
// Ignore la casse

let maRegexp = /d(b+)(d)/i;

let monTableau = maRegexp.exec("cdbBdbsbz");

console.log(monTableau);
// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]

Les propriétés et les éléments retournés depuis cette correspondance sont les suivants
:

Une propriété en lecture seule qui reflète la chaîne

input originale sur laquelle l'expression rationnelle a été cdbBdbsbz
appliquée.

Une propriété en lecture seule qui est l'indice de la

index correspondance dans la chaîne (les indices 1
commencent à 0)

Une propriété en lecture seule qui spécifie les

[0] dbBd
derniers caractères correspondants.

Des éléments en lecture seule qui contiennent les

[1], ... groupes capturés, s'il y en a dans l'expression [1]: bB
[n] régulière. Le nombre de groupes capturés possibles [2]: d
est illimité.

7 sur 15 04/05/2024 19:14

Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

Array()

Crée un nouvel objet Array .

get Array[@@species]

La fonction de construction utilisée pour créer les objets dérivés.

Array.from()

Cette méthode permet de créer une nouvelle instance d' Array à partir d'un objet
semblable à un tableau ou d'un itérable.

Array.isArray()

Cette méthode renvoie true si la variable est un tableau, false sinon.

Array.of()

Cette méthode permet de créer une nouvelle instance d' Array à partir d'un nombre
variable d'arguments (peu importe la quantité ou le type des arguments utilisés).

Array.prototype.length

La propriété de longueur pour le constructeur Array , elle vaut 1.

Array.prototype[@@unscopables]

Un symbole contenant les noms des propriétés à exclure d'une portée de liaison avec
with .

8 sur 15 04/05/2024 19:14

Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

Array.prototype.at()

REnvoie l'élément du tableau à l'indice indiqué. Les entiers négatifs sont acceptés en
argument et, dans ce cas, la recherche de l'élément se fait depuis la fin du tableau.

Array.prototype.concat()

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

Array.prototype.copyWithin()

Copie une séquence d'élément d'un tableau au sein du tableau courant.

Array.prototype.entries()

Renvoie un nouvel qui contient les paires de clés/valeurs pour

chaque indice dans le tableau.

Array.prototype.every()

Renvoie true si chaque élément du tableau vérifie la condition fixée par la fonction
passée en argument.

Array.prototype.fill()

Remplit tous les éléments d'un tableau à partir d'un indice de début jusqu'à un indice
de fin avec une valeur statique.

Array.prototype.filter()

Renvoie un nouveau tableau qui contient tous les éléments du tableau courant pour
lesquels la fonction de filtre passée en argument a renvoyé true .

Array.prototype.find()

Renvoie l'élément trouvé dans le tableau si un des éléments satisfait la condition fixée
par la fonction passée en paramètre. Renvoie undefined si aucun élément
correspondant n'est trouvé.

Array.prototype.findIndex()
9 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

Renvoie l'indice de l'élément trouvé dans le tableau si un élément du tableau satisfait

la condition fixée par la fonction passée en argument ou -1 si aucun élément n'est
trouvé.

Array.prototype.flat()

Renvoie un nouveau tableau avec l'ensemble des sous-éléments concaténés

récursivement dans le tableau jusqu'à une profondeur indiquée.

Array.prototype.flatMap()

Renvoie un nouveau tableau formé en appliquant une fonction de rappel donnée à

chaque élément du tableau puis en « aplatissant » le tableau d'un niveau.

Array.prototype.forEach()

Appelle une fonction pour chaque élément du tableau.

Array.prototype.includes()

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

Array.prototype.indexOf()

Renvoie l'indice le plus petit d'un élément du tableau égal à la valeur passée en
argument ou -1 si aucun élément n'est trouvé.

Array.prototype.join()

Fusionne tous les éléments du tableau en une chaîne de caractères.

Array.prototype.keys()

Renvoie un nouvel qui contient les clés de chaque indice du

tableau.

Array.prototype.lastIndexOf()

Renvoie le plus grand indice d'un élément du tableau égal à la valeur passée en
argument
10 sur 15 ou -1 si aucun élément n'est trouvé. 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

Array.prototype.map()

Renvoie un nouveau tableau contenant les résultats de l'appel de la fonction passée

en argument sur chaque élément du tableau.

Array.prototype.pop()

Retire le dernier élément du tableau et renvoie cet élément.

Array.prototype.push()

Ajoute un ou plusieurs éléments à 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 réduire le tableau à une seule valeur.

Array.prototype.reduceRight()

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

Array.prototype.reverse()

Inverse l'ordre des éléments du tableau (le premier élément

devient le dernier, le dernier devient le premier, etc.).

Array.prototype.shift()

Retire le premier élément du tableau et renvoie cet élément.

Array.prototype.slice()

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

Array.prototype.some()

Renvoie true si au moins un des éléments du tableau satisfait la condition fournie par
la fonction passée en paramètre.
11 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

Array.prototype.sort()

Trie les éléments du tableau à même le tableau et renvoie le tableau.

Array.prototype.splice()

Ajoute et/ou retire des éléments du tableau.

Array.prototype.toLocaleString()

Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments.
Cette méthode surcharge la méthode Object.prototype.toLocaleString() .

Array.prototype.toString()

Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Cette
méthode surcharge la méthode Object.prototype.toString() .

Array.prototype.unshift()

Ajoute un ou plusieurs éléments à l'avant du tableau et renvoie la nouvelle longueur

du tableau.

Array.prototype.values()

Renvoie un nouvel qui contient les valeurs pour chaque indice du

tableau.

Array.prototype @@iterator

Renvoie un nouvel qui contient les valeurs pour chaque indice du

tableau.

Dans l'exemple suivant, on crée un tableau tableauMsg , d'une longueur nulle. Ensuite,
on lui affecte des valeurs pour tableauMsg[0] et tableauMsg[99] , ce qui aura pour effet
de modifier la propriété length (qui vaudra alors 100).
12 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

JS

let tableauMsg = [];

tableauMsg[0] = "Coucou";
tableauMsg[99] = "monde";

if (tableauMsg.length === 100) {

console.log("La longueur du tableau vaut 100.");
}

Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux
dimensions qui contient des caractères. Le premier mouvement est effectué en copiant
'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.

JS

let plateau = [
["T", "C", "F", "R", "K", "F", "C", "T"],
["P", "P", "P", "P", "P", "P", "P", "P"],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
["p", "p", "p", "p", "p", "p", "p", "p"],
["t", "c", "f", "k", "r", "f", "c", "t"],
];

console.log(plateau.join("\n") + "\n\n");

// On déplace le pion de deux cases en avant 2

plateau[4][4] = plateau[6][4];
plateau[6][4] = " ";
console.log(plateau.join("\n"));

Voici le résultat affiché :

T,C,F,R,K,F,C,T
P,P,P,P,P,P,P,P
, , , , , , ,
, , , , , , ,
13 sur 15 04/05/2024 19:14
Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...
, , , , , , ,
, , , , , , ,
p,p,p,p,p,p,p,p
t,c,f,k,r,f,c,t

T,C,F,R,K,F,C,T
P,P,P,P,P,P,P,P
, , , , , , ,
, , , , , , ,
, , , ,p, , ,
, , , , , , ,
p,p,p,p, ,p,p,p
t,c,f,k,r,f,c,t

JS

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

Résulte en

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

(Le première colonne est l'index)

14 sur 15 04/05/2024 19:14

Array - JavaScript | MDN https://developer.mozilla.org/fr/docs/Web/JavaScri...

• Chapitres du guide JavaScript

◦ Guide JavaScript : indexer les propriétés d'un objet

◦ Guide JavaScript : Les objets natifs : l'objet Array

• Les tableaux typés

• RangeError: invalid array length

15 sur 15 04/05/2024 19:14