À propos de Tableaux
En JavaScript, un tableau est une structure de type liste, sans longueur fixe, qui peut contenir n'importe quel type de primitives ou d'objets, même des types mélangés.
Il comprend la propriété length ainsi que de nombreuses méthodes utiles pour parcourir et modifier le tableau.
Pour créer un tableau, place des éléments entre crochets [].
Pour lire une valeur du tableau, place l'indice entre crochets [] après l'identifiant. Les indices d'un tableau commencent à zéro.
Par exemple :
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura
On peut aussi créer des tableaux avec la syntaxe du constructeur, mais dans la plupart des cas, la syntaxe littérale de tableau est recommandée.
const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');
names[1];
// => Laura
Un tableau ne peut pas utiliser de strings comme indices d'éléments, mais doit utiliser des entiers (number).
Définir ou lire une valeur via un indice non entier, avec la notation entre crochets (ou la notation pointée), ne définit ni ne récupère d'élément dans la liste du tableau lui-même : cela définit ou lit une variable associée à la collection de propriétés de l'objet de ce tableau.
Les propriétés de l'objet du tableau et la liste des éléments du tableau sont distinctes, et les opérations de parcours et de modification du tableau ne s'appliquent pas à ces propriétés nommées.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4
// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.
names.magician = 'Elyse';
names.length;
// => 4
// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.
names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]
// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.
names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan
Supprime des éléments d'un tableau
Les tableaux en JavaScript sont des objects ordinaires, et on peut supprimer des éléments avec le mot-clé delete.
Cependant, cela ne change pas la longueur du tableau et laisse un trou empty.
Dans d'autres langages, cela ressemble à un tableau creux.
Ces trous empty sont ignorés lors des opérations de parcours ou de modification.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];
names;
// => ["Jack", empty, "Paul", "Megan"]
names.length;
// => 4
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
S'il ne doit y avoir aucun trou, et si la propriété length doit refléter le nombre d'éléments qui seront parcourus ou modifiés, utilise splice à la place.
La méthode splice() modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments sur place.
Par exemple :
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);
names;
// => ["Jack", "Paul", "Megan"]
names.length;
// => 3
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
La longueur d'un tableau peut être modifiée
La propriété length d'un tableau est liée à la liste des éléments que le tableau contient.
Elle peut être modifiée.
Quand on augmente la longueur, cela crée des trous empty, qui ne sont pas pris en compte lors du parcours ou de la modification du tableau.
Quand on diminue la longueur, cela supprime les éléments à la fin du tableau.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;
names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]
names.length = 2;
// => ["Jack", "Laura"]
Vérifie si quelque chose est un tableau
Comme les tableaux sont des objects, typeof names renvoie "object".
Pour vérifier si quelque chose est un tableau, utilise Array.isArray :
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
typeof names;
// => "object"
Array.isArray(names);
// => true
const object = {};
Array.isArray(object);
// => false
Tu pourrais être tenté d'utiliser names instanceof Array, et ça peut fonctionner, mais pas dans tous les cas.
Lis cet article pour en savoir plus.
Les méthodes de tableau
Certaines des méthodes disponibles sur tous les objets Array permettent d'ajouter ou de supprimer des éléments d'un tableau.
En voici quelques-unes :
push
La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']
pop
La méthode pop() supprime le dernier élément d'un tableau et renvoie cet élément.
Cette méthode modifie la longueur du tableau.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']
shift
La méthode shift() supprime le premier élément d'un tableau et renvoie cet élément supprimé.
Cette méthode modifie la longueur du tableau.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']
unshift
La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']
splice
La méthode splice() modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments sur place.
Cette méthode renvoie un tableau contenant les éléments supprimés.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']
49 exercices
Apprends Tableaux