Méthodes d'Array JavaScript

JavaScript possède de nombreux méthodes intégrées utiles pour traiter les tableaux.

Les méthodes modifiant l'array original sont appeléesméthode mutateur (modificateur).

retournant une nouvelle valeur ou une forme de représentationméthodeappeléaccessor (Accesseur)méthode.

Convertir un array en une chaîne

toString()Les méthodes de l'array convertissent l'array en une chaîne de valeurs d'array (séparées par des virgules).

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

join()Les méthodes de l'array peuvent également convertir tous les éléments de l'array en une nouvelle chaîne.

Le comportement de cette méthode est similaire àtoString()Mais vous pouvez également spécifier un séparateur pour la méthode join.

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　");　　　//　Banana　+　Apple　+　Mango
fruits.join("　/　");　　　//　Banana　/　Apple　/　Mango
fruits.join("　©　");　　//　Banana © Apple © Mango

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

Méthode push() - Ajouter un élément à l'array

push()Les méthodes de l'array ajoutent un ou plusieurs nouveaux éléments à la fin de l'array.

var fruits = ["Banana", "Mango", "Apple"];
fruits.push("Strawberry");

push()La méthode retourne la nouvelle longueur de l'array.

Le code suivant ajoute trois éléments à la fin de l'array. La variable totale contient la nouvelle longueur de l'array :

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");

unshift()Les méthodes de l'array ajoutent un ou plusieurs nouveaux éléments au début de l'array.

var fruits = ["Banana", "Mango", "Apple"];
fruits.unshift("Strawberry");

Leunshift()L'effet de la méthode est : retourner la nouvelle longueur de l'array.

Le code suivant ajoute trois éléments à l'array. La variable totale contient la nouvelle longueur de l'array :

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");

Méthode pop() - Supprimer un élément de l'array

pop()L'effet de la méthode est de: supprimer l'élément final à la fin de l'array.

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

pop()La méthode retourne la valeur «popée (popped out)» :

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

shift()Les méthodes de tableau suppriment le premier élément du tableau.

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

shift()La méthode retourne l'élément «sorti (shifted out)» :

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

Méthode splice() - Ajouter et modifier le tableau

splice()La méthode change le tableau en supprimant des éléments existants et (ou) en ajoutant de nouveaux éléments.

var months = ['Jan', 'Mar', 'Apr', 'Jun'];
months.splice(1, 0,39;Feb');//　adding39;Feb'May&#　1

Le premier paramètre (1) définissant l'emplacement où les nouveaux éléments doivent être ajoutés (concaténés).

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

Troisième paramètre ('Feb'） pour définir les nouveaux éléments à ajouter.

Dans l'exemple suivant, nous allons remplacer à l'index4remplacer à l'index1éléments :

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(4,　1,39; avec39;);　　　//　,39;Jun' replace39; avec39;May&#　4

; à l'index3de l'indice1éléments :

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(3,　1);

Dans l'exemple suivant, nous allons supprimer à partir de l'indice2Début de la suppression2éléments :

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(2,　2);

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

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
var arr = months.splice(2,　2);

Attentionsplice()Ne pas confondre avecslice()Confusion des accesseurs d'array, qui est un accesseur d'array qui copie une partie de l'array.

Modification des éléments du tableau

En utilisant l'opérateur d'affectation, nous pouvons remplacer n'importe quelle valeur dans le tableau.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

Méthode concat() - Fusion des tableaux

concat()Les méthodes de tableau sont utilisées pour fusionner deux ou plusieurs tableaux en un nouveau tableau.

Dans l'exemple suivant, nous allons créer deux tableaux et les combiner en un nouveau tableau :

var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5,　10,　12,　98,　3];
var arr = fruits.concat(numbers);

concat()La méthode peut utiliser plusieurs paramètres, vous pouvez utiliser efficacement une méthode unique pour concaténer plusieurs tableaux.

var num1　= [1,　2,　3];
var num2　= [4,　5,　6];
var num3　= [7,　8,　9];
var nums = num1.concat(num2, num3);

Méthode slice() - Coupe de tableau

slice()La méthode d'array copie une partie de l'array dans un nouveau tableau.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(1,　3);//　return　Mango,　Apple

Le premier paramètre (1）défini la position de début de l'extraction.

Le second paramètre (3）défini la position de fin de l'extraction.

Si le second paramètre est omis, alors leslice()La méthode coupe le reste de l'array.

Dans l'exemple suivant, nous allons extraire des éléments sans utiliser de second paramètre :

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(1);//　return　Mango,　Apple,　Orange

Dans l'exemple suivant, nous allons utiliser des valeurs négatives pour extraire des éléments de l'array :

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(-3,　-1);//　return　Mango,　Apple

Recherche d'éléments dans l'array

indexOf()La méthode d'array retourne le premier index où l'élément spécifié peut être trouvé dans l'array.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Apple');//　returns　2

Remarque :L'index du premier élément est 0, l'index du deuxième élément est1et ainsi de suite.

Si le paramètre donné n'existe pas dans l'array, il retournera-1.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Beer');//　returns　-1

lastIndexOf()La méthode d'array retourne le dernier index où l'élément spécifié peut être trouvé dans l'array.

Nous pouvons tester le même exemple que celui de indexOf() qui contient deux "Apple".

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Apple');//　returns　4

Remarque :lastIndexOf()Il cherchera à partir de la fin de l'array et retournera le premier index trouvé.

Si le paramètre donné n'existe pas dans l'array, il retournera-1.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Beer');//　returns　-1

Méthode fill()

fill()La méthode d'array remplace tous les éléments de l'array par une valeur statique.

var nums = [1,　2,　3,　4];
nums.fill(17);

Tous les quatre éléments de l'array ont été remplacés par la même valeur17.

fill()et accepte également les paramètres optionnels de début et de fin.

de la position2à la position4Remplir 0 (ne comprend pas4）：

var nums = [1,　2,　3,　4];
nums.fill(0,　2,　4);

Utiliserfill()On peut remplacer un ou plusieurs éléments d'un tableau par des valeurs statiques.

Tri et inversion de tableau

reverse()La méthode d'array peut inverser l'ordre des éléments de l'array.

var nums = [10,　20,　30,　40,　50];
nums.reverse();

Utiliserreverse()Ensuite, le dernier élément deviendra le premier, et le premier élément deviendra le dernier.

La méthode sort()La méthode d'array trie les éléments de l'array en fonction du premier caractère de chaque élément. En cas d'identité du premier caractère, il continue de comparer le second caractère, et ainsi de suite...

Par défaut,La méthode sort()Tous les tableaux de chaînes de caractères majuscules ou minuscules sont classés par ordre alphabétique.

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();

En raison deLa méthode sort()Basé sur le premier caractère Unicode, il tri donc les éléments en majuscules avant de trier ceux en minuscules.

Modifions l'array original afin que l'un de nos strings commence par une lettre minuscule.

var months = ['March', 'Jan', 'Feb', 'dec'];
months.sort();

Vous pouvez utiliserLa méthode sort()tri les nombres.

var nums = [5,　1,　2,　7,　3,　6,　4];
nums.sort();

La méthode sort()Ne trie pas les tableaux de nombres par taille. Au lieu de cela, il vérifie uniquement le premier caractère des nombres.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort();

Pour trier correctement les nombres, vous pouvez créer une fonction de comparaison en tant que paramètre.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort(function(a, b) {return a　-　b});

Si vous devez trier les nombres plusieurs fois, vous pouvez créer une fonction séparée.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort(sortNumerically);
//　Fonction pour trier les nombres par taille
var sortNumerically = (a, b) => {
　　return a　-　b;
}

Référence complète des tableaux

Pour une référence complète des propriétés et méthodes, veuillez visiter notreManuel de référence des tableaux JavaScript.

La partie de référence contient une description et des exemples de toutes les propriétés et méthodes des tableaux.