Tableau multidimensionnel JavaScript

Résumé : dans ce tutoriel, vous apprendrez à travailler avec le tableau multidimensionnel JavaScript.

Introduction au tableau multidimensionnel JavaScript

JavaScript ne fournit pas nativement le tableau multidimensionnel. Cependant, vous pouvez créer un tableau multidimensionnel en définissant un tableau d’éléments, où chaque élément est également un autre tableau.

Pour cette raison, nous pouvons dire qu’un tableau multidimensionnel JavaScript est un tableau de tableaux. La façon la plus simple de définir un tableau multidimensionnel est d’utiliser la notation littérale de tableau.

Pour déclarer un tableau multidimensionnel vide, vous utilisez la même syntaxe que pour déclarer un tableau unidimensionnel :

let activities = ;
Code language: JavaScript (javascript)

L’exemple suivant définit un tableau bidimensionnel nommé activities :

let activities = , , , , ];
Code language: JavaScript (javascript)

Dans le tableau activities, la première dimension représente l’activité et la seconde indique le nombre d’heures passées par jour pour chacune.

Pour afficher le tableau activities dans la console, vous utilisez la méthode console.table() comme suit :

console.table(activities);
Code language: JavaScript (javascript)

Les éléments suivants illustrent la sortie :

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Notez que la colonne (index) est pour l’illustration qui indique les indices du tableau intérieur.

Pour accéder à un élément du tableau multidimensionnel, vous utilisez d’abord des crochets pour accéder à un élément du tableau externe qui renvoie un tableau interne ; puis vous utilisez un autre crochet pour accéder à l’élément du tableau interne.

L’exemple suivant renvoie le deuxième élément du premier tableau intérieur dans le tableau activities ci-dessus :

console.log(activities); // 9
Code language: JavaScript (javascript)

Ajouter des éléments au tableau multidimensionnel JavaScript

Vous pouvez utiliser les méthodes Array telles que push() et splice() pour manipuler les éléments d’un tableau multidimensionnel.

Par exemple, pour ajouter un nouvel élément à la fin du tableau multidimensionnel, vous utilisez la méthode push() comme suit :

activities.push();console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 ││ 5 │ 'Study' │ 2 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Pour insérer un élément au milieu du tableau, vous utilisez la méthode splice(). Ce qui suit insère un élément en deuxième position du tableau des activités:

activities.splice(1, 0, );console.table(activities);
Code language: CSS (css)

Voici le résultat:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 ││ 6 │ 'Study' │ 2 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Cet exemple calcule le pourcentage des heures passées sur chaque activité et ajoute le pourcentage au tableau intérieur.

activities.forEach(activity => { let percentage = ((activity / 24) * 100).toFixed(); activity = percentage + '%';});console.table(activities);
Code language: JavaScript (javascript)

Les éléments suivants montrent la sortie dans la console :

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' ││ 6 │ 'Study' │ 2 │ '8%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

Suppression d’éléments du tableau multidimensionnel JavaScript

Pour supprimer un élément d’un tableau, vous utilisez la méthode pop() ou splice().

Par exemple, l’instruction suivante supprime le dernier élément du tableau activities.

activities.pop();console.table(activities);
Code language: CSS (css)

Sortie:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

De même, vous pouvez supprimer les éléments du tableau interne du tableau multidimensionnel en utilisant la méthode pop(). L’exemple suivant supprime l’élément pourcentage des tableaux intérieurs du tableau activities.

activities.forEach((activity) => { activity.pop(2);});console.table(activities);
Code language: JavaScript (javascript)

Sortie:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Itération sur les éléments du tableau multidimensionnel JavaScript

Pour itérer un tableau multidimensionnel, vous utilisez une boucle for imbriquée comme dans l’exemple suivant.

// loop the outer arrayfor (let i = 0; i < activities.length; i++) { // get the size of the inner array var innerArrayLength = activities.length; // loop the inner array for (let j = 0; j < innerArrayLength; j++) { console.log(' = ' + activities); }}
Code language: JavaScript (javascript)

La première boucle itère sur les éléments du tableau extérieur et la boucle imbriquée itère sur les éléments du tableau intérieur.

Les éléments suivants montrent la sortie du script dans la console :

 = Work = 9 = Eat = 1 = Commute = 2 = Play Game = 1 = Sleep = 7 = Study = 2

Ou vous pouvez utiliser la méthode forEach() deux fois :

activities.forEach((activity) => { activity.forEach((data) => { console.log(data); });});
Code language: JavaScript (javascript)

Sortie:

Work9Eat1Commute2Play Game1Sleep7Study2

Dans ce tutoriel, vous avez appris à utiliser un tableau de tableaux pour créer un tableau multidimensionnel JavaScript.

.