JavaScript 2D Array

Un tableau JavaScript à deux dimensions est un tableau dont les éléments sont eux-mêmes des tableaux représentant des lignes. Utilisez des littéraux imbriqués lorsque les valeurs sont connues, ou créez des lignes distinctes avec des boucles, Array.from() ou Array.prototype.map() lorsque les dimensions ou les valeurs proviennent de données. Pour lire une cellule, utilisez deux indices : grid[rowIndex][columnIndex].

Qu’est-ce qu’un tableau à deux dimensions en JavaScript ?

JavaScript ne possède pas de type distinct pour les tableaux à deux dimensions. Une grille est un tableau de tableaux : le tableau externe contient les lignes, et chaque ligne contient ses cellules. Cette structure peut représenter une matrice, un plateau de jeu ou d’autres données organisées en lignes et en colonnes. Les lignes peuvent avoir des longueurs différentes ; vérifiez donc la longueur d’une ligne si vous ne savez pas si la grille est rectangulaire.

Les indices d’un tableau commencent à zéro. Dans grid[1][2], 1 sélectionne la deuxième ligne et 2 la troisième cellule de cette ligne. Créer les lignes et remplir leurs cellules sont deux étapes distinctes : un tableau nouvellement alloué peut contenir des emplacements non initialisés, qui ne sont pas équivalents à des cellules définies sur null.

Créer un tableau à deux dimensions avec des littéraux de tableaux imbriqués

Pour une grille de dimensions fixes dont les valeurs sont connues, écrivez chaque ligne sous la forme d’un tableau interne :

const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(grid[0][1]);

Chaque tableau interne constitue une ligne distincte. L’expression grid[0][1] sélectionne la valeur 2 : le premier indice choisit une ligne, et le second une cellule de cette ligne. La notation littérale est pratique lorsque toutes les données sont déjà disponibles.

Créer un tableau à deux dimensions avec des boucles

Utilisez des boucles imbriquées lorsque les dimensions ou les valeurs des cellules ne sont déterminées qu’à l’exécution. Allouez une nouvelle ligne à chaque itération de la boucle externe, puis affectez une valeur à chaque cellule :

const rows = 3;
const columns = 3;
const grid = [];

for (let row = 0; row < rows; row++) {
  grid[row] = [];
  for (let column = 0; column < columns; column++) {
    grid[row][column] = row * columns + column + 1;
  }
}

console.log(grid);

La boucle externe crée trois lignes indépendantes. La boucle interne remplit chaque ligne avec les valeurs de 1 à 9. Si les cellules doivent commencer avec une valeur par défaut, affectez-la dans la boucle interne, par exemple avec grid[row][column] = 0.

Évitez Array(rows).fill(Array(columns).fill(0)) pour des lignes modifiables : fill() répète la même référence de ligne. Toute modification d’une ligne se répercute donc sur la cellule correspondante de toutes les lignes. Créez plutôt une nouvelle ligne à chaque itération de la boucle externe.

Créer un tableau à deux dimensions avec Array.from()

Array.from() peut créer le tableau externe ainsi qu’une nouvelle ligne pour chaque indice. Sa fonction de rappel reçoit l’indice courant et peut donc calculer chaque cellule à partir de sa ligne et de sa colonne :

const rows = 3;
const columns = 3;
const grid = Array.from({ length: rows }, (_, row) =>
  Array.from({ length: columns }, (_, column) => row * columns + column + 1)
);

console.log(grid);

L’appel externe crée trois lignes ; l’appel interne crée et remplit chacune d’elles avec trois valeurs. Comme l’appel interne à Array.from() est exécuté une fois pour chaque indice externe, chaque ligne est un tableau distinct. Pour initialiser toutes les cellules à 0, utilisez Array.from({ length: columns }, () => 0) comme appel interne.

Créer un tableau à deux dimensions avec Array.prototype.map()

map() transforme les éléments existants d’un tableau en un nouveau tableau. Commencez par des emplacements renseignés afin que sa fonction de rappel soit exécutée pour chaque ligne ; new Array(rows) crée à lui seul des emplacements creux, que map() ignore.

const rows = 3;
const columns = 3;
const grid = Array.from({ length: rows }, (_, row) => row).map(row =>
  Array.from({ length: columns }, (_, column) => row * columns + column + 1)
);

console.log(grid);

Ici, Array.from() crée d’abord une séquence renseignée d’indices de ligne, puis Array.prototype.map() alloue une ligne indépendante pour chaque indice. La fonction de rappel peut aussi renvoyer une ligne remplie avec une valeur par défaut, par exemple Array.from({ length: columns }, () => 0).

Initialiser et accéder aux valeurs d’un tableau à deux dimensions

Pour lire une cellule, utilisez grid[row][column] ; pour la modifier, affectez une valeur avec les mêmes indices, comme dans grid[1][2] = 42. Dans un tableau de trois lignes et de quatre colonnes, les indices de ligne valides vont de 0 à 2, et les indices de colonne de 0 à 3. JavaScript n’impose pas de dimensions rectangulaires : la longueur de chaque ligne détermine donc les indices de colonne qu’elle contient.

Pour initialiser une grille avec une même valeur de départ, créez une nouvelle ligne pour chaque indice de ligne. Par exemple, Array.from({ length: rows }, () => Array.from({ length: columns }, () => 0)) crée des lignes distinctes dont chaque cellule vaut 0. Cela diffère de new Array(rows), qui contient des emplacements creux, et de la répétition d’un même tableau interne avec fill().

Choisissez les littéraux pour des valeurs connues, les boucles lorsque vous souhaitez contrôler explicitement la construction, Array.from() pour générer des lignes et des cellules, et Array.prototype.map() pour transformer une séquence existante et renseignée. Ces quatre méthodes produisent des tableaux imbriqués ordinaires ; utilisez les mêmes indices ligne puis colonne pour accéder aux cellules et les modifier.