Name: Tremplin Numérique
Price range: $$$

Illustration montrant le logo JavaScript

Les tableaux JavaScript sont des structures de données qui vous permettent de stocker plusieurs valeurs sous un seul nom de variable. Les tableaux sont un type d’objet. Ils sont livrés avec plusieurs méthodes utilitaires que vous pouvez utiliser pour manipuler leurs données.

Les tableaux en JavaScript ont des restrictions très souples concernant ce que vous pouvez y placer. Ils n’ont ni longueur fixe ni type spécifique. Ils se comportent plus comme une liste de valeurs que les tableaux classiques de langages fortement typés.

Sommaire

Déclaration d’un tableau

Les tableaux JavaScript utilisent des crochets. Vous pouvez les initialiser vides ou ajouter une série de valeurs par défaut. Les valeurs sont séparées par des virgules. Vous pouvez utiliser n’importe quelle valeur JavaScript valide, telle qu’une chaîne, un entier, un objet ou un autre tableau.

let emptyArray = [];
 
let filledArray = ["hello", 123, {foo: "bar"}, ["x", "y"]];

Accès aux valeurs de tableau

Vous récupérez une valeur d’un tableau en spécifiant l’index auquel vous souhaitez accéder. Les index de tableau sont numérotés à partir de 0. Utilisez la syntaxe entre crochets pour définir l’index du tableau à récupérer.

let myArray = ["foo", "bar", "example"];
 
// logs "bar"
console.log(myArray[1]);

Les index de tableau sont toujours des entiers en JavaScript. Vous ne pouvez pas utiliser des chaînes comme index – utilisez plutôt un objet si vous devez le faire.

Vous pouvez modifier la valeur d’un index de tableau en le définissant directement:

myArray ci-dessus contiendrait désormais les valeurs foo, test, example.

Ajout d’éléments à des tableaux

Vous ajoutez de nouveaux éléments aux tableaux à l’aide de push() méthode:

["car", "truck"].push("bus");
// car, truck, bus

Cela ajoute l’élément à la fin du tableau. Si vous souhaitez que le nouvel élément soit inséré au début du tableau, utilisez le unshift() méthode à la place.

["car", "truck"].unshift("bus");
// bus, car, truck

Parfois, vous devrez peut-être insérer un élément au milieu d’un tableau. Vous pouvez utiliser le splice() méthode pour ajouter un élément à un index spécifique:

["car", "truck"].splice(1, 0, "bus");
// car, bus, truck

Le premier argument pour splice() est l’index sur lequel effectuer l’insertion. Vient ensuite le nombre d’éléments à supprimer depuis le début du tableau. Lorsque vous ajoutez un nouvel élément, cela devrait être 0 afin que les éléments existants soient conservés. Le dernier argument est l’élément à ajouter.

Suppression d’éléments des tableaux

Pour supprimer un élément de tableau, utilisez le pop() méthode. Il «fera sortir» le dernier élément du tableau:

["car", "truck", "bus"].pop();
// car, truck

Pour supprimer le première élément de tableau, utilisez le shift() méthode à la place:

["car", "truck", "bus"].shift();
// truck, bus

Si vous souhaitez supprimer un élément spécifique, vous devrez utiliser le splice() méthode à nouveau. Vous devez d’abord connaître l’index que vous souhaitez supprimer. Si vous travaillez à partir de l’une des valeurs du tableau, appelez d’abord indexOf() pour obtenir son index. Vous pouvez ensuite transmettre ceci à splice(), définissant le deuxième argument sur 1 pour supprimer un élément à l’index donné.

const arr = ["car", "truck", "bus"];
arr.splice(arr.indexOf("truck"), 1);
// car, bus

Itération sur des tableaux

Il existe plusieurs façons de parcourir un tableau. L’approche traditionnelle consiste à utiliser un for boucle:

const arr = ["car", "truck", "bus"];
for (let i = 0; i < arr.length; i++) {
    console.log(`Vehicle at position ${i} is ${arr[i]}`);
}

Une alternative plus courte consiste à utiliser le tableau forEach() méthode. Cela doit avoir une fonction. La fonction est appelée une fois pour chaque élément du tableau. Il reçoit la valeur et l’index de chaque élément en tant que paramètres.

["car", "truck", "bus"].forEach((vehicle, i) => {
    console.log(`Vehicle at position ${i} is ${vehicle}`);
});

forEach() est souvent plus facile à travailler qu’un for boucle. Vous devez cependant faire attention lorsque vous renvoyez des valeurs. Retour de la fonction passée à forEach() n’annulera pas la boucle:

const arr = ["car", "truck", "bus"];
 
// logs "car"
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    if (arr[i] === "truck") return;
}
 
// logs "car", "truck", "bus"
arr.forEach((vehicle, i) => {
    console.log(vehicle);
    if (vehicle === "truck") return;
});

Avec forEach(), le return instruction retourne de la fonction anonyme. La boucle est créée par la portée externe, elle continue donc d’appeler à nouveau la fonction pour les éléments restants du tableau.

Mappage de tableaux

map() est l’une des méthodes de tableau les plus puissantes de JavaScript. Il accepte une fonction qui sera appelée pour chaque élément du tableau. Un nouveau tableau contenant les résultats de chaque appel de fonction est ensuite renvoyé.

const arr = [2, 4, 8, 16];
const mapped = arr.map(v => (v * v));
// mapped contains 4, 16, 64, 256

Votre fonction de rappel reçoit en fait trois arguments: la valeur à la position actuelle, l’index de la position actuelle et le tableau qui map() est appelé.

[1, 2, 3].map((value, index, arr) => (value * value));

Le mappage est utile lorsque vous devez parcourir un tableau, accéder à chaque valeur, puis dériver une nouvelle valeur de cette itération. La technique est également utile lorsque vous travaillez avec des frameworks d’interface utilisateur tels que React, où vous pouvez mapper des données pour les transformer en un nœud DOM:

const MyComponent = users => (
    users.map(user => (
        <div>
            <p>{user.Name}</p>
            <p>{user.Email}</p>
        </div>
    ))
);

Pensez à utiliser map() chaque fois que vous devez effectuer une action sur chaque élément d’un tableau, même si vous n’êtes pas intéressé par la valeur de retour de votre rappel.

Filtrage des tableaux

Une autre tâche courante consiste à filtrer un tableau pour exclure certains éléments. Vous pourriez être enclin à créer un nouveau tableau vide et à utiliser un for boucle pour tester des éléments dans votre original. Une approche plus simple consisterait à utiliser la fonction intégrée de JavaScript filter() méthode.

Aimer map(), filter() prend une fonction de rappel qui est appelée à chaque itération. La valeur actuelle, l’index et le tableau, sont passés au rappel en tant que paramètres. Le rappel doit retourner soit true ou false pour indiquer si la valeur actuelle doit être incluse dans le nouveau tableau filtré.

const filtered = [1, 2, 3].filter(v => (v % 2 === 0));
// filtered is [2]

Utilisant filter() rend le filtrage rapide et concis. Vous n’avez pas besoin de construire un for boucle et configurez vous-même le nouveau tableau. La méthode renvoie toujours un nouveau tableau et ne mute pas l’original.

Méthodes utilitaires

Voici quelques autres méthodes qui pourraient vous être utiles.

Joindre deux baies: Utilisez le concat() méthode pour joindre deux tableaux ensemble. Il renverra un Nouveau array, avec son argument ajouté au tableau sur lequel il a été appelé. ["a, "b", "c"].concat(["x", "y", "z"]) Retour ["a", "b", "c", "x", "y", "z"].
Conversion d’un tableau en chaîne: Utilisez le join() méthode pour combiner les valeurs d’un tableau en une seule chaîne. Vous pouvez spécifier le séparateur comme premier paramètre de la fonction. ["a", "b", "c"].join(" - ") reviendra a - b - c.
Obtenir des index de valeur: Si vous savez qu’une valeur existe dans un tableau, vous pouvez obtenir son index numérique avec indexOf(). Si la valeur existe plusieurs fois dans le tableau, l’index de la première occurrence est renvoyé. Vous pouvez obtenir l’index des dernier occurrence utilisant lastIndexOf().
Déterminer si une valeur existe dans un tableau: Le includes() La méthode accepte une valeur et vous permet de vérifier si elle existe dans un tableau. Il renvoie un booléen indiquant si la valeur a été trouvée. ["a", "b", "c"].includes("a") retournerais true.
Créer un tableau vide avec une longueur prédéterminée: Vous pouvez utiliser le Array constructeur pour initialiser un tableau vide d’une longueur donnée. const myArr = new Array(10) créerait un tableau avec 10 index (0-9), chacun avec undefined comme sa valeur.
Tester si tous les éléments d’un tableau correspondent à une condition: Parfois, vous voudrez peut-être vérifier si chaque élément d’un tableau remplit une condition. Le every() méthode vous permet de le faire. Il accepte un rappel qui fonctionne de la même manière que le filter() méthode. La méthode ne retournera que true si chaque appel du callback retourne true. Si vous voulez savoir si seulement quelques des éléments du tableau correspondent, utilisez le some() méthode à la place.

Conclusion

Les tableaux JavaScript sont une structure de données polyvalente avec des méthodes intégrées utiles. Par rapport à d’autres langages, travailler avec des tableaux en JavaScript est simple et concis. Vous pouvez rapidement itérer, mapper et filtrer les valeurs à l’aide des fonctions de flèche en ligne qui gardent votre code propre et lisible.