Tableaux JavaScript
Un tableau est une variable spéciale, qui peut contenir plusieurs valeurs :
const cars = ["Saab", "Volvo", "BMW"];
Pourquoi utiliser un tableau ?
Si vous avez une liste d'éléments (une liste de noms de voitures, par exemple), le stockage des voitures dans des variables uniques 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 en particulier ? Et si vous n'aviez pas 3 voitures, mais 300 ?
La solution est un tableau !
Un tableau peut contenir plusieurs 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
L'utilisation d'un littéral de tableau est le moyen le plus simple de créer un tableau JavaScript.
Syntaxe:
const array_name = [item1, item2, ...];
Il est courant de déclarer des tableaux avec le mot-clé const .
Apprenez-en 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, puis fournir les éléments :
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 attribue des valeurs :
Exemple
const cars = new Array("Saab", "Volvo", "BMW");
Les deux exemples ci-dessus font exactement la même chose.
Il n'est pas nécessaire d'utiliser new Array().
Pour plus de simplicité, de lisibilité et de vitesse d'exécution, utilisez la méthode du tableau littéral.
Accéder aux éléments du tableau
On accède à un élément du tableau en se référant au numéro d'index :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Remarque : Les index de tableau commencent par 0.
[0] est le premier élément. [1] est le deuxième élément.
Modification d'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";
Accéder au tableau complet
Avec JavaScript, le tableau complet est accessible 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 particulier d'objets. L' typeofopérateur en JavaScript renvoie "object" pour les tableaux.
Mais, les tableaux JavaScript sont mieux décrits comme des tableaux.
Les tableaux utilisent des nombres pour accéder à ses "éléments". Dans cet exemple, person[0]
renvoie John :
Déployer:
const person = ["John", "Doe", 46];
Les objets utilisent des noms pour accéder à ses "membres". Dans cet exemple,
person.firstName
renvoie John :
Objet:
const person = {firstName:"John", lastName:"Doe", age:46};
Les éléments du tableau peuvent être des objets
Les variables JavaScript peuvent être des objets. Les tableaux sont des types particuliers d'objets.
Pour cette raison, vous pouvez avoir des variables de différents types dans le même Array.
Vous pouvez avoir des objets dans un tableau. Vous pouvez avoir des fonctions dans un tableau. Vous pouvez avoir des tableaux dans un Array :
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 // Returns the number of elements
cars.sort() // Sorts the array
Les méthodes de tableau sont couvertes dans les chapitres suivants.
La propriété de longueur
La lengthpropriété 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 lengthpropriété est toujours une de plus que l'indice de tableau le plus élevé.
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];
Éléments de tableau en boucle
Une façon de parcourir un tableau consiste à utiliser une forboucle :
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 Array.forEach()fonction :
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Ajout d'éléments de tableau
Le moyen le plus simple d'ajouter un nouvel élément à un tableau consiste à utiliser la push()méthode :
Exemple
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Un nouvel élément peut également être ajouté à un tableau à l'aide de la lengthpropriété :
Exemple
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
AVERTISSEMENT !
L'ajout d'é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"; // Creates undefined "holes" in 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; // Will return 3
person[0]; // Will return "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; // Will return 0
person[0]; // Will return undefined
La différence entre les tableaux et les 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 particulier d'objets, avec des index numérotés.
Quand utiliser les tableaux. Quand utiliser les objets.
- JavaScript ne prend pas en charge les tableaux associatifs.
- Vous devez utiliser des objets lorsque vous souhaitez que les noms d'éléments soient des chaînes (texte) .
- Vous devez utiliser des tableaux lorsque vous voulez que les noms des éléments soient des nombres .
JavaScript nouveau tableau()
JavaScript a un constructeur de tableau intégré new Array().
Mais vous pouvez utiliser en toute sécurité à la []place.
Ces deux instructions différentes créent toutes deux un nouveau tableau vide nommé points :
const points = new Array();
const points = [];
Ces deux instructions 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 newmot clé peut produire des résultats inattendus :
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Une erreur courante
const points = [40];
n'est pas la même chose que :
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Comment reconnaître un tableau
Une question courante est : comment savoir si une variable est un tableau ?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.