Tableaux JavaScript
Exemple
const cars = ["Saab", "Volvo", "BMW"]; Un tableau est un type d'objet conçu pour stocker des collections de données.
Les caractéristiques clés des tableaux JavaScript sont :
-
Éléments : Un tableau est une liste de valeurs, connues sous le nom d'éléments.
-
Ordonné : Les éléments d'un tableau sont ordonnés en fonction de leur index.
-
Indexé à zéro : Le premier élément se trouve à l'index 0, le deuxième à l'index 1, et ainsi de suite.
-
Taille dynamique : Les tableaux peuvent grandir ou rétrécir à mesure que des éléments sont ajoutés ou supprimés.
-
Hétérogène : Les tableaux peuvent stocker des éléments de différents types de données (nombres, chaînes, objets et autres tableaux).
Pourquoi utiliser des tableaux ?
Si vous avez une liste d'éléments (une liste de noms de voitures, par exemple), stocker les noms dans des variables individuelles pourrait ressembler à ceci :
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW"; Cependant, que se passe-t-il si vous voulez parcourir les voitures et en trouver une spécifique ? Et que se passerait-il si vous n'aviez pas 3 voitures, mais 300 ?
La solution est un tableau !
Un tableau peut contenir de nombreuses valeurs sous un seul nom, et vous pouvez accéder aux valeurs en vous référant à un numéro d'index.
Création d'un tableau
Utiliser un littéral de tableau est le moyen le plus simple de créer un tableau JavaScript.
Syntaxe :
const array_name = [ item1 , item2 , ...];
Remarque
Il est courant de déclarer des tableaux avec le mot-clé const .
En savoir plus sur const avec des tableaux dans le chapitre : JS Array Const .
Exemple
const cars = ["Saab", "Volvo", "BMW"]; Les espaces et les sauts de ligne ne sont pas importants. Une déclaration peut s'étendre sur plusieurs lignes :
Exemple
const cars = [
"Saab",
"Volvo",
"BMW"
]; Vous pouvez également créer un tableau vide et fournir des éléments plus tard :
Exemple
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Utilisation du mot-clé JavaScript new
L'exemple suivant crée également un tableau et lui assigne des valeurs :
Exemple
const cars = new Array("Saab", "Volvo", "BMW"); Remarque
Les deux exemples ci-dessus font exactement la même chose.
Il n'est pas nécessaire d'utiliser new Array() .
Pour des raisons de simplicité, de lisibilité et de vitesse d'exécution, utilisez la méthode littérale de tableau.
Accéder aux éléments d'un tableau
Vous accédez à un élément de tableau en vous référant au numéro d'index :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0]; Remarque : Les index de tableau commencent à 0.
[0] est le premier élément. [1] est le deuxième élément.
Changer un élément de tableau
Cette instruction change la valeur du premier élément dans cars :
cars[0] = "Opel"; Exemple
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel"; Convertir un tableau en chaîne
La méthode JavaScript toString() convertit un tableau en une 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 :
Accéder au tableau complet
Avec JavaScript, le tableau complet peut être accédé en se référant au nom du tableau :
Exemple
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; Les tableaux sont des objets
Les tableaux sont un type spécial d'objets. L'opérateur typeof en JavaScript renvoie "objet" pour les tableaux.
Cependant, les tableaux JavaScript sont mieux décrits comme des tableaux.
Les tableaux utilisent des nombres pour accéder à leurs "éléments". Dans cet exemple, person[0] renvoie John :
Tableau :
const person = ["John", "Doe", 46]; Les objets utilisent des noms pour accéder à leurs "membres". Dans cet exemple, person.firstName renvoie John :
Objet :
const person = {firstName:"John", lastName:"Doe", age:46}; Les éléments de tableau peuvent être des objets
Les variables JavaScript peuvent être des objets. Les tableaux sont des sortes spéciales d'objets.
En raison de cela, vous pouvez avoir des variables de différents types dans le même tableau.
Vous pouvez avoir des objets dans un tableau. Vous pouvez avoir des fonctions dans un tableau. Vous pouvez avoir des tableaux dans un tableau :
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars; Propriétés et méthodes des tableaux
La véritable force des tableaux JavaScript réside dans les propriétés et méthodes de tableau intégrées :
cars.length // Renvoie le nombre d'éléments
cars.sort() // Trie le tableau Les méthodes de tableau sont couvertes dans les chapitres suivants.
La propriété length
La propriété length d'un tableau renvoie la longueur d'un tableau (le nombre d'éléments du tableau).
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length; La propriété length est toujours un de plus que l'index le plus élevé du tableau.
Accéder au premier élément du tableau
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0]; Accéder au dernier élément du tableau
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1]; Boucle à travers les éléments d'un tableau
Une façon de parcourir un tableau est d'utiliser une boucle for :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>"; Vous pouvez également utiliser la fonction Array.forEach() :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
} Ajouter des éléments à un tableau
Le moyen le plus simple d'ajouter un nouvel élément à un tableau est d'utiliser la méthode push() :
Exemple
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Ajoute un nouvel élément (Lemon) aux fruits Un nouvel élément peut également être ajouté à un tableau en utilisant la propriété length :
Exemple
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Ajoute "Lemon" aux fruits AVERTISSEMENT !
Ajouter des éléments avec des index élevés peut créer des "trous" indéfinis dans un tableau :
Exemple
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Crée des "trous" indéfinis dans les fruits Tableaux associatifs
De nombreux langages de programmation prennent en charge les tableaux avec des index nommés.
Les tableaux avec des index nommés sont appelés tableaux associatifs (ou hachages).
JavaScript ne prend pas en charge les tableaux avec des index nommés.
En JavaScript, les tableaux utilisent toujours des index numérotés .
Exemple
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Renverra 3
person[0]; // Renverra "John" AVERTISSEMENT !!
Si vous utilisez des index nommés, JavaScript redéfinira le tableau en un objet.
Après cela, certaines méthodes et propriétés de tableau produiront des résultats incorrects .
Exemple :
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Renverra 0
person[0]; // Renverra indéfini La différence entre tableaux et objets
En JavaScript, les tableaux utilisent des index numérotés .
En JavaScript, les objets utilisent des index nommés .
Les tableaux sont un type spécial d'objets, avec des index numérotés.
Quand utiliser des tableaux. Quand utiliser des objets.
- JavaScript ne prend pas en charge les tableaux associatifs.
- Vous devriez utiliser des objets lorsque vous voulez que les noms des éléments soient des chaînes (texte) .
- Vous devriez utiliser des tableaux lorsque vous voulez que les noms des éléments soient des nombres .
JavaScript new Array()
JavaScript a un constructeur de tableau intégré new Array() .
Mais vous pouvez utiliser en toute sécurité [] à la place.
Ces deux déclarations différentes créent toutes deux un nouveau tableau vide nommé points :
const points = new Array();
const points = []; Ces deux déclarations différentes créent toutes deux un nouveau tableau contenant 6 nombres :
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10]; Le mot-clé new peut produire des résultats inattendus :
// Créer un tableau avec trois éléments :
const points = new Array(40, 100, 1); // Créer un tableau avec deux éléments :
const points = new Array(40, 100); // Créer un tableau avec un élément ???
const points = new Array(40); Une erreur courante
const points = [40]; n'est pas la même chose que :
const points = new Array(40); // Créer un tableau avec un élément :
const points = [40]; // Créer un tableau avec 40 éléments indéfinis :
const points = new Array(40); Comment reconnaître un tableau
Une question courante est : Comment savoir si une variable est un tableau ?
Le problème est que l'opérateur JavaScript typeof renvoie " object ":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits; L'opérateur typeof renvoie un objet car un tableau JavaScript est un objet.
Solution 1 :
Pour résoudre ce problème, ECMAScript 5 (JavaScript 2009) a défini une nouvelle méthode Array.isArray() :
Array.isArray(fruits); Solution 2 :
L'opérateur instanceof renvoie true si un objet est créé par un constructeur donné :
const fruits = ["Banana", "Orange", "Apple"];
(fruits instanceof Array); Tableaux et objets imbriqués
Les valeurs dans les objets peuvent être des tableaux, et les valeurs dans les tableaux peuvent être des objets :
Exemple
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
} Pour accéder aux tableaux à l'intérieur des tableaux, utilisez une boucle for-in pour chaque tableau :
Exemple
for (let i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}