[Mise à jour le 25/9/2020]

• Sources et compléments sur MDN Web Docs
  • Les tableaux

• Lectures connexes
  • Wikis WebPEM : "Préparer un projet de site Web avec l'IDE VSCode"

Exemples

*.js

// Tableau vide
// Première forme de déclaration
var messages = new Array(); 
// Deuxième forme de déclaration
var smartphones=[]; 
 
// Tableau initialisé
// Avec deux éléments
var messages = new Array("Bonjour","Hello");
 
// Avec trois éléments.
var smartphones=["GalaxyS8", "iPhone7", "Honor9"]; 
// Forme d'écriture lorsque la liste est longue
var smartphones=[
"GalaxyS8", 
"iPhone7", 
"Honor9"
]; 
 
smartphones; // résultat dans la console : Array(3) ["iphone8", "iPhone7", "Honor9"]

Si on souhaite le faire on écrira :

Exemples

*.js

var messages = new Array(5);
var smartphones=[5];

Exemples

*.js

var smartphones=["GalaxyS8", "iPhone7", "Honor9"];
smartphone[0]; // résultat dans la console: "GalaxyS8"

Exemples

*.js

var smartphones = [];
smartphones[1] = "iPhone4"; // résultat dans la console: "iPhone4" remplace "iPhone7"
smartphones[33] = "iphone6";
smartphones; // résultat dans la console: Array(34) [undefined × 1, "iPhone4", undefined × 31, "iphone6"]

Tous les éléments d'un tableau ne sont pas obligatoirement de même type (un tableau est une liste en JavaScript). Il est également possible de placer un tableau dans un autre.

Exemples

*.js

var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
 
var voitures = [		// Tableau à deux dimensions
["Peugeot","3008", 10],
["Renault", "Captur",5],
["Ford", "C-Max", 15]
];
 
voitures[2]; // résultat dans la console : (3) ["Ford", "C-Max", 15]
 
voitures[2][1];
// résultat dans la console: "C-Max" (l'accès à un élément nécessite une deuxième paire de crochets

En JavaScript, il existe des propriétés et des méthodes pour manipuler facilement des tableaux. Les propriétés fournissent des informations au sujet des tableaux et les méthodes permettent de les modifier ou de les renvoyer.

Exemples

*.js

var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
 
voitures.length; // résultat dans la console : 6

• À la fin du tableau

Exemples

*.js

var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
voitures.push("Citroën",3);
 
voitures; // résultat dans la console : Array(8) ["Peugeot", 10, "Renault", 5, "Ford", 15, "Citroën", 3]

• Au début du tableau

*.js

var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
voitures.unshift("Citroën",3);
 
voitures; // résultat dans la console : Array(8) ["Citroën", 3, "Peugeot", 10, "Renault", 5, "Ford", 15]

• A la fin du tableau

Exemples

*.js

var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15,
"Citroën", 3
];
 
voitures.pop(); // résultat dans la console : Array(7) ["Peugeot", 10, "Renault", 5, "Ford", 15, "Citroën"]
voitures.pop(); // résultat dans la console : Array(6) ["Peugeot", 10, "Renault", 5, "Ford", 15]

• Au début du tableau

Exemples

*.js

var voitures = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10,
"Renault", 5,
"Ford", 15,
];
 
voitures.shift(); // résultat dans la console : Array(7) [3, "Peugeot", 10, "Renault", 5, "Ford", 15]
voitures.shift(); // résultat dans la console : Array(6) ["Peugeot", 10, "Renault", 5, "Ford", 15]

Exemples

*.js

var marquesv1 = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10
];
// Tableau à une dimension
var marquesv2 = [
"Renault", 5,
"Ford", 15
];
 
marquesv1.concat(marquesv2);
// résultat dans la console : Array(8) ["Citroën", 3, "Peugeot", 10, "Renault", 5, "Ford", 15]

Exemples

*.js

var marquesv1 = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10
];
 
marquesv1.indexOf("Peugeot"); // résultat dans la console : 2

Exemples

*.js

var prenom = ["Vincent", "Benoît", "Georges"];
prenom.join(); // résultat dans la console : "Vincent,Benoît,Georges"

Pour parcourir un tableau, il faut faire autant d'itérations qu'il y a d'items. Le nombre d'items d'un tableau se récupère avec la propriété length, exactement comme pour le nombre de caractères d'une chaîne.
À chaque itération, on va avancer d'un item dans le tableau, en utilisant la variable de boucle i. Comme elle s'incrémente, cela permet d'avancer dans le tableau item par item.

Exemples

*.js

var smartphones=["GalaxyS8", "iPhone7", "Honor9"];
 
for (var i = 0; i < smartphones.length; i++) {
 
    console.log(smartphones[i]);
}
// résultat dans la console :
"GalaxyS8"
"iPhone7"
"Honor9"

• Lien à consulter sur XUL : Tableau associatif en JavaScript

MDN web docs Mozilla