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()
La propriété length
renvoie la longueur (taille) d'un tableau :
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>
toString()
La méthode JavaScript toString()
convertit un tableau en chaîne de valeurs de tableau (séparées par des virgules).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Résultat :
Banana,Orange,Apple,MangoEssayez-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 :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Résultat :
Banana * Orange * Apple * MangoEssayez-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>
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.
pop()
La méthode pop()
supprime le dernier élément d'un tableau :
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" :
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>
push()
La méthode push()
ajoute un nouvel élément à un tableau (à la fin) :
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 :
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>
Shifting équivaut à popping, mais travailler sur le premier élément au lieu de le dernier.
shift()
La méthode shift()
supprime le premier élément du tableau et "décale" tout d'autres éléments à un indice inférieur.
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" :
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>
unshift()
La méthode unshift()
ajoute un nouvel élément à un tableau (au début), et "unshifts" éléments plus anciens :
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 :
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>
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...
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>
La propriété length
fournit un moyen simple d'ajouter un nouvel élément à un tableau :
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>
delete()
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().
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>
La méthode concat()
crée un nouveau tableau en fusionnant (concaténant) tableaux existants :
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 :
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 :
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>
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.
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>
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 |
La méthode splice()
ajoute de nouveaux éléments à un tableau.
La méthode slice()
découpe un morceau d'un tableau.
splice()
La méthode splice()
peut être utilisée pour ajouter de nouveaux éléments à un tableau :
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 où 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 :
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>
splice()
pour supprimer des élémentsAvec un paramétrage intelligent, vous pouvez utiliser splice()
pour supprimer des éléments sans quitter "trous" dans le tableau :
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é.
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"):
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>
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"):
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.
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.
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()
automatiqueJavaScript 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 :
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>
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>
Tous les objets JavaScript ont une méthode toString().
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.
Le tri des tableaux est abordé dans le chapitre suivant de ce didacticiel.
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.