JavaScript 2D Array

Ein zweidimensionales JavaScript-Array ist ein Array, dessen Elemente Zeilen-Arrays sind. Sind die Werte bekannt, eignen sich verschachtelte Literale. Wenn Dimensionen oder Werte aus Daten stammen, lassen sich separate Zeilen mit Schleifen, Array.from() oder Array.prototype.map() erzeugen. Auf eine Zelle greifst du mit zwei Indizes zu: grid[rowIndex][columnIndex].

Was ist ein zweidimensionales Array in JavaScript?

JavaScript hat keinen eigenen Typ für zweidimensionale Arrays. Ein Raster ist ein Array aus Arrays: Das äußere Array enthält die Zeilen, und jede Zeile enthält ihre Zellen. Mit dieser Struktur lassen sich Matrizen, Spielfelder und andere Daten mit Zeilen und Spalten darstellen. Zeilen können unterschiedlich lang sein. Ist nicht garantiert, dass das Raster rechteckig ist, solltest du daher die Länge der jeweiligen Zeile prüfen.

Array-Indizes beginnen bei null. In grid[1][2] wählt 1 die zweite Zeile und 2 die dritte Zelle dieser Zeile aus. Zeilen anzulegen und ihre Zellen zu füllen sind getrennte Schritte: Ein neu angelegtes Array kann nicht initialisierte Slots enthalten. Diese sind nicht dasselbe wie Zellen, denen null zugewiesen wurde.

Ein zweidimensionales Array mit verschachtelten Array-Literalen erstellen

Bei einem festen Raster mit bekannten Werten schreibst du jede Zeile als inneres Array:

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

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

Jedes innere Array ist eine eigene Zeile. Der Ausdruck grid[0][1] wählt den Wert 2 aus: Der erste Index bestimmt die Zeile, der zweite die Zelle in dieser Zeile. Die Literal-Schreibweise ist praktisch, wenn die vollständigen Daten bereits vorliegen.

Ein zweidimensionales Array mit Schleifen erstellen

Verwende verschachtelte Schleifen, wenn die Dimensionen oder Zellwerte erst zur Laufzeit feststehen. Lege bei jedem Durchlauf der äußeren Schleife eine neue Zeile an und weise anschließend jeder Zelle einen Wert zu:

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);

Die äußere Schleife erstellt drei voneinander unabhängige Zeilen. Die innere Schleife füllt jede Zeile mit Werten von 1 bis 9. Sollen die Zellen mit einem Standardwert beginnen, weise ihn in der inneren Schleife zu, zum Beispiel mit grid[row][column] = 0.

Vermeide Array(rows).fill(Array(columns).fill(0)), wenn die Zeilen veränderbar sein sollen: fill() wiederholt dieselbe Zeilenreferenz. Änderst du eine Zeile, erscheint die Änderung daher an derselben Spalte in jeder Zeile. Erstelle stattdessen bei jedem Durchlauf der äußeren Schleife eine neue Zeile.

Ein zweidimensionales Array mit Array.from() erstellen

Mit Array.from() kannst du das äußere Array und für jeden Index eine neue Zeile erstellen. Der Mapping-Callback erhält den aktuellen Index und kann so jede Zelle anhand ihrer Zeile und Spalte berechnen:

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);

Der äußere Aufruf erstellt drei Zeilen; der innere Aufruf erstellt jede Zeile mit drei Werten und füllt sie. Da das innere Array.from() für jeden Index des äußeren Arrays einmal ausgeführt wird, ist jede Zeile ein eigenes Array. Sollen alle Zellen mit 0 beginnen, kannst du für den inneren Aufruf Array.from({ length: columns }, () => 0) verwenden.

Ein zweidimensionales Array mit Array.prototype.map() erstellen

map() wandelt die vorhandenen Elemente eines Arrays in ein neues Array um. Beginne mit belegten Slots, damit der Callback für jede Zeile ausgeführt wird. new Array(rows) allein erzeugt sparse Slots, die map() überspringt.

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);

Hier erstellt Array.from() zunächst eine Folge mit belegten Zeilenindizes. Anschließend erzeugt Array.prototype.map() für jeden Index eine eigene, neu angelegte Zeile. Der Callback kann auch eine mit Standardwerten gefüllte Zeile zurückgeben, zum Beispiel Array.from({ length: columns }, () => 0).

Werte in einem zweidimensionalen Array initialisieren und darauf zugreifen

Zum Lesen einer Zelle verwendest du grid[row][column]. Um sie zu ändern, weist du über dieselben Indizes einen neuen Wert zu, etwa mit grid[1][2] = 42. Bei einem Array mit drei Zeilen und vier Spalten sind die gültigen Zeilenindizes 0 bis 2 und die gültigen Spaltenindizes 0 bis 3. JavaScript erzwingt keine rechteckigen Dimensionen. Welche Spaltenindizes eine Zeile enthält, hängt daher von ihrer Länge ab.

Wenn ein Raster mit einem gemeinsamen Anfangswert initialisiert werden soll, erstelle für jeden Zeilenindex eine neue Zeile. Zum Beispiel erzeugt Array.from({ length: rows }, () => Array.from({ length: columns }, () => 0)) separate Zeilen, in denen jede Zelle auf 0 gesetzt ist. Das unterscheidet sich von new Array(rows), das sparse Slots enthält, und davon, mit fill() dasselbe innere Array zu wiederholen.

Verwende Literale für bekannte Werte, Schleifen, wenn du den Aufbau ausdrücklich steuern möchtest, Array.from() für erzeugte Zeilen und Zellen und Array.prototype.map(), wenn du eine bereits belegte Folge umwandeln willst. Alle vier Ansätze erzeugen gewöhnliche verschachtelte Arrays. Auf Zellen greifst du nach demselben Muster aus Zeilen- und Spaltenindex zu und kannst sie so auch ändern.