Méthodes de tableau JavaScript

Le pouvoir des tableaux JavaScript se cache dans les méthodes des tableaux.

Convertit un tableau en une chaîne de caractères

Méthode JavaScript toString() Convertit un tableau en une chaîne de valeurs d'array (séparées par des virgules).

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
document.getElementById("demo").innerHTML = fruits.toString();

Résultat

Banana,Orange,Apple,Mango

Essayez-le vous-même

join() La méthode peut également combiner tous les éléments d'un tableau en une chaîne de caractères.

Son comportement est similaire à toString(), mais vous pouvez également spécifier un séparateur :

Exemple

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

Résultat

Banana * Orange * Apple * Mango

Essayez-le vous-même

Popping et Pushing

Lorsque vous travaillez avec un tableau, supprimer un élément et ajouter un nouveau est très simple.

Popping et Pushing signifie :

Enlever de l'arrayPopProjet, ou ajouter à l'arrayPusherProjet.

Popping

pop() La méthode supprime le dernier élément de l'array :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.pop();              // Supprime le dernier élément de fruits ("Mango")

Essayez-le vous-même

pop() La méthode retourne la valeur "éjectée" :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
var x = fruits.pop();      // La valeur de x est "Mango"

Essayez-le vous-même

Pushing

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

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.push("Kiwi");       // Ajoute un nouvel élément à fruits

Essayez-le vous-même

push() La méthode retourne la longueur du nouveau tableau :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
var x = fruits.push("Kiwi");   // La valeur de x est 5

Essayez-le vous-même

Déplacement d'éléments

Le déplacement est équivalent à l'éjection, mais il s'agit de traiter l'élément premier plutôt que le dernier.

shift() La méthode supprime l'élément premier et déplace tous les autres éléments vers des indices inférieurs.

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.shift();            // Supprime le premier élément "Banana" de fruits

Essayez-le vous-même

shift() La méthode retourne la chaîne "déplacée" :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.shift();             // Retourne "Banana"

Essayez-le vous-même

unshift() La méthode (au début) ajoute de nouveaux éléments à un tableau et "déplace" les anciens éléments en arrière :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.unshift("Lemon");    // Ajoute l'élément "Lemon" à fruits

Essayez-le vous-même

unshift() La méthode retourne la longueur du nouveau tableau.

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.unshift("Lemon");    // Retourne 5

Essayez-le vous-même

Modifier les éléments

En utilisant leursNuméro d'indexPour accéder aux éléments du tableau :

TableauIndex (sous-index)Commence par 0. [0] est l'élément premier du tableau, [1] est le deuxième, [2] est le troisième ...

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits[0] = "Kiwi";        // Change le premier élément de fruits en "Kiwi"

Essayez-le vous-même

length L'attribut fournit une méthode simple pour ajouter de nouveaux éléments à un tableau :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits[fruits.length] = "Kiwi";          // Ajoute "Kiwi" à fruits

Essayez-le vous-même

Supprimer des éléments

Comme les tableaux JavaScript sont des objets, leurs éléments peuvent être supprimés en utilisant JavaScript delete l'opérateur pourSupprimer：

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
delete fruits[0];           // Change le premier élément de fruits en undefined

Essayez-le vous-même

Utilisez delete laissera des vides non définis dans le tableau. Utilisez pop() ou shift() Au lieu de cela.

Concaténation de tableaux

splice() La méthode peut être utilisée pour ajouter de nouveaux éléments à un tableau :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Essayez-le vous-même

Le premier paramètre (2) définit l'emplacement où l'élément nouveau doit être ajouté (concaténation).

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

Les autres paramètres ("Lemon", "Kiwi") définissent les nouveaux éléments à ajouter.

splice() La méthode retourne un tableau contenant les éléments supprimés :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Essayez-le vous-même

Utilisez splice() pour supprimer des éléments

Grâce à une configuration de paramètres intelligente, vous pouvez utiliser splice() Retirer un élément sans laisser de vide dans le tableau :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
fruits.splice(0, 1);        // Supprime le premier élément de fruits

Essayez-le vous-même

Le premier paramètre (0) définit où l'élément nouveau doit être添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

实例（合并两个数组）

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

Essayez-le vous-même

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

实例（合并三个数组）

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

Essayez-le vous-même

concat() 方法也可以将值作为参数：

实例（将数组与值合并）

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Essayez-le vous-même

裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （"Orange"）开始切出一段数组：

Exemple

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

Essayez-le vous-même

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （"Apple"）开始切出一段数组：

Exemple

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

Essayez-le vous-même

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

Exemple

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

Essayez-le vous-même

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

Exemple

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

Essayez-le vous-même

自动 toString()

Si vous avez besoin de valeurs brutes, JavaScript convertit automatiquement le tableau en chaîne de caractères. Les deux exemples suivants produisent le même résultat :

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
document.getElementById("demo").innerHTML = fruits.toString();

Essayez-le vous-même

Exemple

var fruits = ["Banane", "Orange", "Apple", "Mangue"];
document.getElementById("demo").innerHTML = fruits;

Essayez-le vous-même

Tous les objets JavaScript possèdent toString() Méthode.

Tri des tableaux

Nous apprendrons la mise en ordre des tableaux au prochain chapitre~.

Trouver les valeurs maximales et minimales dans un tableau

Il n'existe pas de fonctions intégrées dans JavaScript pour trouver les valeurs maximales et minimales dans un tableau.

Vous apprendrez comment résoudre ce problème dans le prochain chapitre de ce tutoriel.

Manuel de référence complet des tableaux

Pour un manuel de référence complet, veuillez visiter notre Manuel de référence des tableaux JavaScript.

Ce manuel de référence contient des descriptions et des exemples de toutes les propriétés et méthodes des tableaux.