Objet Array (tableau) JavaScript

Un tableau en JavaScript est un objet global, utilisé pour stocker plusieurs valeurs dans une seule variable.

Un tableau peut contenir n'importe quel type de données, y compris des chaînes, des nombres, des objets, des fonctions, même d'autres tableaux.

Supposons que vous vouliez stocker des noms de villes dans un code JavaScript. Stocker les noms de villes un par un pourrait ressembler à cela :

　　let city1　= "New Delhi";
　　let city2　= "Mumbai";
　　let city3　= "Jaipur";

Mais si vous avez besoin de stocker le nom d'une ville d'un pays dans une variable, ce ne sera pas seulement trois, mais peut-être cent.

Il serait très difficile de gérer tant de variables à la fois et de suivre toutes les variables.

Un tableau résout ce problème en fournissant une structure ordonnée pour stocker plusieurs valeurs ou un ensemble de valeurs dans une seule variable.

Créer un tableau

Il y a deux méthodes pour créer un tableau en JavaScript :

• littéral-création impliciteen utilisant des crochets : []

• façon concise-exemplarisation directeen utilisant la clé new

Laissez-nous démontrer comment utiliser l'initialisation deConstante de tableauCréer fruitsTableau[] :

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

La déclaration peut être répartie sur plusieurs lignes :

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

Maintenant voici l'utilisationConstructeur de tableauCrée des données identiques, cette donnée utilisant l'initialisation new Array() :

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

Ces deux méthodes créent un tableau. Mais,littéral-création impliciteLa méthode ([]) est plus courante et préférée, carnew Array()Les méthodes de constructeur peuvent entraîner des résultats incohérents et imprévus.

Indices du tableau

Un tableau n'a pas de nom/Non pas des paires de valeurs, mais des valeurs indexées à partir de zéro.

Voici un exemple d'array assigné à fruits :

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

Voici la décomposition de la manière dont chaque élément du tableau fruits est indexé :

Le premier élément du tableau est "Apple", l'index est 0.

Le dernier élément est "Orange", l'index est3。

Accéder aux éléments du tableau

On peut accéder aux éléments d'un tableau JavaScript en se référant à l'index de l'élément entre crochets.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0];//　Retourne "Apple"
fruits[2];//　Retourne "Banana"

Les indices des tableaux JavaScript commencent à zéro : l'index du premier élément d'un tableau est 0, l'index du deuxième élément est1et ainsi de suite.

En essayant d'accéder à un élément qui n'existe pas dans un tableau, on retourne undefined.

fruits[7];//　Retourne undefined

On peut accéder à l'ensemble de l'array en se référant au nom de l'array.

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

propriété length du tableau

Nous pouvons utiliser lalengthLa propriété find permet de déterminer combien d'éléments se trouvent dans un tableau.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;　　　//　Retourne　4

L'index du dernier élément est égal à la valeur de la propriété length de l'array en soustrayant1。

Ce exemple utilise la propriété length pour afficher la valeur du dernier élément :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length　-　1;
fruits[lastIndex];

Ajouter des éléments à l'array

Dans la variable fruits, nous avons quatre éléments, y compris de 0 à3de l'index. Si vous souhaitez ajouter un nouvel élément à l'array, vous pouvez assigner une valeur à l'index suivant.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

　 　 Si nous ajoutons un élément et que nous sautons accidentellement un index, cela créera un élément avec une valeur vide ('') dans le tableau.

fruits[6] = "Strawberry";

En utilisantpush()La méthode peut éviter des problèmes similaires, cette méthode ajoute un élément à la fin du tableau.

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

On peut également utiliserlengthPropriété pour ajouter un nouvel élément au tableau.

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

Modifier l'élément 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";

Les tableaux sont généralement utilisés pour regrouper des listes de types de données similaires, mais techniquement, ils peuvent contenir n'importe quel type de valeur ou une combinaison de valeurs.

let myArray = [5,　22, "Arrow", "Bone", true, new Date()];

Parcourir le tableau

Nous pouvons utiliserforetlengthPropriété pour parcourir l'ensemble du tableau.

Dans cet exemple, nous créons un tableau de fruits et affichons chaque index et chaque valeur dans le document :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";
//Longueur du tableau
for (let i = 0; i < fruits.length; i++) {
txt　+i　+　" = "　+　fruits[i]　+　"<br>";
}

Nous pouvons également utiliser les suivantesArray.forEach()Méthode :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
fruits.forEach(function(element) {
result.innerHTML　+element　+　"<br>";
});

Nous pouvons également utiliserfor...ofLa boucle pour parcourir un tableau js, c'est une nouvelle fonctionnalité de JavaScript :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
for (let x of fruits) {
result.innerHTML　+x;
}

for...ofLa boucle ne récupère pas l'index de l'élément du tableau, mais c'est généralement une méthode plus simple et plus concise pour parcourir un tableau.

Tableau multidimensionnel

Un tableau multidimensionnel est un tableau contenant un ou plusieurs tableaux.

　　let points = [
　　　[35,　28,　29,　31],
　　　[33,　24,　25,　29]
　　];

JavaScript peut comprendre une profondeur de2,3,4,5Un tableau multidimensionnel de niveau ou supérieur. Cependant, pour la plupart des gens, il est difficile de gérer des tableaux de plus de trois niveaux.

Le nombre de dimensions d'un tableau indique le nombre d'indices nécessaires pour sélectionner un élément :

• Pour un tableau à deux dimensions, vous avez besoin de deux indices pour sélectionner un élément

• Pour un tableau à trois dimensions, vous avez besoin de trois indices pour sélectionner un élément

Un tableau à deux dimensions peut être considéré comme une table, où le premier [ ] est la ligne, et le second [ ] est la colonne.

points[0][1];　　　//　Retourne　28
points[1][0];　　　//　Retourne　33

Dans cet exemple, nous créons un tableau à deux dimensions et affichons chaque index et chaque valeur dans le document :

let points = [[35,　28,　29,　31], [33,　24,　25,　29]];
let row;
let col;
for (row = 0; row <　2; row++) {
　　　for (col = 0; col <　4; col++) {
　　document.write(row, col, points[row][col]);
　　　}
}

Bien sûr, vous pouvez également utiliserlengthObtenir la taille de la ligne et de la colonne via les propriétés :

let points = [
　　　[10,　12,　14,　16,　18],
　　　[20,　22,　24,　26],
　　　[30,　32,　34],
　　　[32,　34]
];
points.length;//　Retourne　4　(Total des lignes)
points[0].length;//　Retourne　5
points[1].length;//　Retourne　4
points[2].length;//　Retourne　3
points[3].length;//　Retourne　2

Dans la plupart des cas,2Un tableau de dimension 2 est suffisant, bien que l'utilisation de3Tableau de dimension.

Les tableaux JavaScript sont des objets

En JavaScript, un tableau est un type spécial d'objet.

L'opérateur typeof de JavaScript renvoie "Object" pour un tableau.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;　　　//　Retourne "object"

Évitez d'utiliser new Array()

Il n'est pas nécessaire d'utiliser le constructeur de tableau new Array() .

Au lieu de cela, il est préférable d'utiliser la création implicite des tableaux, c'est-à-dire d'utiliser directement la méthode de crochets [] , cette méthode est plus courante et plus appréciée.

Les deux instructions suivantes créent un nouveau tableau vide nommé scores :

　　let scores = new Array();　　//　Ne pas utiliser cette méthode
　　let scores = [];　　　　　//　Méthode recommandée

Les deux instructions suivantes créent un tableau contenant5un tableau avec des nombres :

let scores = new Array(2,　5,　10,　28,　10);　//　Ne pas utiliser cette méthode
let scores = [2,　5,　10,　28,　10];　　//　Méthode recommandée

Les méthodes new Array() peuvent présenter des incohérences et produire des résultats imprévus :

let scores = new Array(10,　25);　　//　Créer un tableau contenant deux éléments(10et25) est un tableau
let scores = new Array(10);　　//　Créer un tableau contenant10un tableau avec des valeurs d'éléments non définies

Comment déterminer si une variable est un tableau - Array.isArray()

Comme vous le savez, l'opérateur typeof de JavaScript renvoie "Object" pour un tableau.

Une question courante est :Comment savoir si une variable est un tableau ?

Pour résoudre ce problème, ECMAScript 5Définit une nouvelle méthodeArray.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

Si l'objet est créé par le constructeur donné, l'opérateur instanceof peut également retourner true :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
　　　//　instructions à exécuter
}

Passer un tableau à la fonction

Dans l'exemple suivant, nous allons passer un tableau à la fonction :

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
　　for (let elem of arg) {
　　document.write(elem, "<br> ");
　　}
}

Retourner un tableau à partir de la fonction

Dans l'exemple suivant, nous allons retourner un tableau à partir de la fonction :

function myFunc() {
　　let fruits = ["Apple", "Mango", "Banana", "Orange"];
　　return fruits;
}
let myArray = myFunc();
document.write(myArray);