Méthodes de tableau JavaScript


Table des matières

    Afficher la table des matières

Les méthodes sont répertoriées dans l'ordre dans lequel elles apparaissent dans cette page de didacticiel

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

Longueur du tableau JavaScript

La propriété length renvoie la longueur (taille) d'un tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Tableau JavaScript toString()

La méthode JavaScript toString() convertit un tableau en 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 :

Banana,Orange,Apple,Mango

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

La méthode join() 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 :

Banana * Orange * Apple * Mango

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

Sauter et pousser

Lorsque vous travaillez avec des tableaux, il est facile de supprimer des éléments et d'en ajouter de nouveaux éléments.

Voici ce qu'est le popping et le push :

Extraire des éléments hors d'un tableau ou pousser éléments dans un tableau.



Tableau JavaScript pop()

La méthode pop() supprime le dernier élément d'un tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

La méthode pop() renvoie la valeur qui a été "sortie" :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Tableau JavaScript push()

La méthode push() ajoute un nouvel élément à un tableau (à la fin) :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

La méthode push() renvoie la nouvelle longueur du tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Éléments changeants

Shifting équivaut à popping, mais travailler sur le premier élément au lieu de le dernier.


Tableau JavaScript shift()

La méthode shift() supprime le premier élément du tableau et "décale" tout d'autres éléments à un indice inférieur.

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

La méthode shift() renvoie la valeur qui a été "décalée" :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Tableau JavaScript unshift()

La méthode unshift() ajoute un nouvel élément à un tableau (au début), et "unshifts" éléments plus anciens :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

La méthode unshift() renvoie la nouvelle longueur du tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Changer les éléments

Les éléments du tableau sont accessibles à l'aide de leur numéro d'index :

Les index du 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";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Longueur du tableau JavaScript

La propriété length fournit un moyen simple d'ajouter un nouvel élément à un tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Tableau JavaScript delete()

Avertissement !

Les éléments du tableau peuvent être supprimés à l'aide de l'opérateur JavaScript delete.

L'utilisation de delete laisse des trous non définis dans le tableau.

Utilisez plutôt pop() ou shift().

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Fusion (concaténation) de tableaux

La méthode concat() crée un nouveau tableau en fusionnant (concaténant) tableaux existants :

Exemple (fusion de deux tableaux)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

La méthode concat() ne modifie pas les tableaux existants. Il renvoie toujours un nouveau tableau.

La méthode 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 myChildren = arr1.concat(arr2, arr3);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

La méthode concat() 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"); 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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.

Exemple

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Prise en charge du navigateur

JavaScript Array flat() est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Tableaux d'épissage et de découpage

La méthode splice() ajoute de nouveaux éléments à un tableau.

La méthode slice() découpe un morceau d'un tableau.


Tableau JavaScript splice()

La méthode splice() 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");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Le premier paramètre (2) définit la position les nouveaux éléments doivent être ajouté (ajouté).

Le deuxième paramètre (0) définit combien d'éléments doivent être supprimé.

Le reste des paramètres ("Lemon", "Kiwi") définissent les nouveaux éléments à ajouté.

La méthode splice() renvoie un tableau avec les éléments supprimés :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

Utiliser splice() pour supprimer des éléments

Avec un paramétrage intelligent, vous pouvez utiliser splice() pour supprimer des éléments sans quitter "trous" dans le tableau :

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Le premier paramètre (0) définit la position où les nouveaux éléments doivent être ajouté (ajouté).

Le deuxième paramètre (1) définit combien d'éléments doivent être supprimé.

Le reste des paramètres est omis. Aucun nouvel élément ne sera ajouté.


Tableau JavaScript slice()

La méthode slice() 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);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Note

La méthode slice() crée un nouveau tableau.

La méthode slice() 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 ("Pomme"):

Exemple

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

La méthode slice() peut prendre deux arguments comme slice(1, 3).

La méthode sélectionne ensuite les éléments à partir de l'argument de départ, et jusqu'à (mais pas y compris) l'argument de fin.

Exemple

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Si l'argument de fin 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 citrus = fruits.slice(2);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

toString() automatique

JavaScript convertit automatiquement un tableau en chaîne séparée par des virgules lorsqu'un 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 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Exemple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>

</body>
</html>

Note

Tous les objets JavaScript ont une méthode toString().


Recherche de valeurs maximales et minimales dans un tableau

Il n'y a pas de fonctions intégrées pour trouver le plus haut ou la valeur la plus basse dans un tableau JavaScript.

Vous apprendrez comment résoudre ce problème dans la prochaine chapitre de ce tutoriel.


Tri des tableaux

Le tri des tableaux est abordé dans le chapitre suivant de ce didacticiel.

Référence complète du tableau

Pour une référence complète sur Array, accédez à notre :

Référence complète du tableau JavaScript.

La référence contient des descriptions et des exemples de tous les Array propriétés et méthodes.