JavaScript 2D Array

Un array bidimensionale in JavaScript è un array i cui elementi sono a loro volta array che rappresentano le righe. Se i valori sono già noti, puoi usare array literal annidati; se dimensioni o valori dipendono dai dati, puoi creare righe separate con cicli, Array.from() o Array.prototype.map(). Per leggere una cella, usa due indici: grid[rowIndex][columnIndex].

Che cos’è un array bidimensionale in JavaScript?

JavaScript non ha un tipo distinto per gli array 2D. Una griglia è un array di array: quello esterno contiene le righe e ogni riga contiene le proprie celle. Questa struttura può rappresentare una matrice, una scacchiera o altri dati organizzati in righe e colonne. Le righe possono avere lunghezze diverse: se non è garantito che la griglia sia rettangolare, controlla la lunghezza della riga.

Gli indici degli array partono da zero. In grid[1][2], 1 seleziona la seconda riga e 2 la terza cella di quella riga. Creare le righe e riempirne le celle sono operazioni distinte: un array appena allocato può contenere posizioni non inizializzate, che non equivalgono a celle impostate su null.

Creare un array bidimensionale con array literal annidati

Per una griglia fissa con valori già noti, scrivi ogni riga come array interno:

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

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

Ogni array interno è una riga distinta. L’espressione grid[0][1] seleziona il valore 2: il primo indice sceglie la riga, il secondo una cella al suo interno. La notazione literal è comoda quando tutti i dati sono già disponibili.

Creare un array bidimensionale con i cicli

Usa cicli annidati quando le dimensioni o i valori delle celle vengono determinati durante l’esecuzione. A ogni iterazione del ciclo esterno, crea una nuova riga e poi assegna i valori alle singole celle:

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

Il ciclo esterno crea tre righe indipendenti. Quello interno riempie ogni riga con i valori da 1 a 9. Se vuoi che le celle inizino con un valore predefinito, assegnalo nel ciclo interno, per esempio con grid[row][column] = 0.

Per righe modificabili, evita Array(rows).fill(Array(columns).fill(0)): fill() ripete il riferimento alla stessa riga, quindi una modifica a una riga si riflette nella stessa colonna di tutte le altre. Crea invece una nuova riga a ogni iterazione del ciclo esterno.

Creare un array bidimensionale con Array.from()

Array.from() può creare l’array esterno e una nuova riga per ogni indice. La funzione di mappatura riceve l’indice corrente, quindi può calcolare ogni cella in base alla riga e alla colonna:

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

La chiamata esterna crea tre righe; quella interna crea e riempie ciascuna riga con tre valori. Poiché la chiamata interna a Array.from() viene eseguita una volta per ogni indice esterno, ogni riga è un array distinto. Per inizializzare tutte le celle a 0, usa come chiamata interna Array.from({ length: columns }, () => 0).

Creare un array bidimensionale con Array.prototype.map()

map() trasforma gli elementi già presenti in un array e restituisce un nuovo array. Parti da posizioni valorizzate, così la funzione di callback viene eseguita per ogni riga: new Array(rows) da solo crea posizioni sparse, che map() ignora.

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

Qui Array.from() crea prima una sequenza valorizzata di indici di riga, poi Array.prototype.map() crea una riga allocata separatamente per ogni indice. La callback può anche restituire una riga inizializzata con un valore predefinito, per esempio Array.from({ length: columns }, () => 0).

Inizializzare e accedere ai valori di un array bidimensionale

Per leggere una cella, usa grid[row][column]; per modificarla, assegna un valore usando gli stessi indici, come in grid[1][2] = 42. In un array con tre righe e quattro colonne, gli indici validi delle righe vanno da 0 a 2 e quelli delle colonne da 0 a 3. JavaScript non impone dimensioni rettangolari, quindi è la lunghezza di ciascuna riga a determinare quali indici di colonna siano presenti.

Per inizializzare una griglia con lo stesso valore iniziale, crea una riga nuova per ogni indice di riga. Per esempio, Array.from({ length: rows }, () => Array.from({ length: columns }, () => 0)) crea righe separate e imposta ogni cella a 0. Questo è diverso da new Array(rows), che contiene posizioni sparse, e dal ripetere lo stesso array interno con fill().

Scegli gli array literal per i valori noti, i cicli quando vuoi controllare esplicitamente la costruzione, Array.from() per generare righe e celle e Array.prototype.map() per trasformare una sequenza esistente e valorizzata. Tutti e quattro gli approcci producono normali array annidati; per accedere alle celle o modificarle, usa gli indici nello stesso ordine: prima la riga, poi la colonna.