JavaScript Multidimensional Array (Italiano)

Sommario: in questo tutorial, imparerai come lavorare con JavaScript multidimensional array.

Introduzione a JavaScript multidimensional array

JavaScript non fornisce nativamente l’array multidimensionale. Tuttavia, è possibile creare un array multidimensionale definendo un array di elementi, dove ogni elemento è anche un altro array.

Per questa ragione, possiamo dire che un array multidimensionale JavaScript è un array di array. Il modo più semplice per definire un array multidimensionale è usare la notazione letterale di array.

Per dichiarare un array multidimensionale vuoto, si usa la stessa sintassi della dichiarazione di un array unidimensionale:

let activities = ;
Code language: JavaScript (javascript)

L’esempio seguente definisce un array bidimensionale chiamato activities:

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

Nell’array activities, la prima dimensione rappresenta l’attività e la seconda mostra il numero di ore trascorse al giorno per ciascuna.

Per mostrare l’array activities nella console, si usa il metodo console.table() come segue:

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

Il seguente illustra l’output:

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

Nota che la colonna (index) è per l’illustrazione che indica gli indici dell’array interno.

Per accedere ad un elemento dell’array multidimensionale, si usano prima le parentesi quadre per accedere ad un elemento dell’array esterno che restituisce un array interno; e poi si usa un’altra parentesi quadre per accedere all’elemento dell’array interno.

L’esempio seguente restituisce il secondo elemento del primo array interno nell’array activities di cui sopra:

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

Aggiungere elementi all’array multidimensionale in JavaScript

Puoi usare i metodi Array come push() e splice() per manipolare elementi di un array multidimensionale.

Per esempio, per aggiungere un nuovo elemento alla fine dell’array multidimensionale, si usa il metodo push() come segue:

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)

Per inserire un elemento nel mezzo dell’array, si usa il metodo splice(). Il seguente inserisce un elemento nella seconda posizione dell’array delle attività:

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

Ecco l’output:

┌─────────┬───────────────┬───┐│ (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)

Questo esempio calcola la percentuale delle ore spese per ogni attività e aggiunge la percentuale all’array interno.

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

Il seguente mostra l’output nella 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)

Rimuovere elementi dall’array multidimensionale JavaScript

Per rimuovere un elemento da un array, si usa il metodo pop() o splice().

Per esempio, la seguente dichiarazione rimuove l’ultimo elemento dell’array activities.

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

Output:

┌─────────┬───────────────┬───┬───────┐│ (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)

Similmente, potete rimuovere gli elementi dall’array interno dell’array multidimensionale usando il metodo pop(). L’esempio seguente rimuove l’elemento percentuale dagli array interni dell’array activities.

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

Output:

┌─────────┬───────────────┬───┐│ (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)

Iterazione sugli elementi dell’array multidimensionale in JavaScript

Per iterare un array multidimensionale, si usa un ciclo for annidato come nel seguente esempio.

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

Il primo ciclo itera sugli elementi dell’array esterno e il ciclo annidato itera sugli elementi dell’array interno.

Il seguente mostra l’output dello script nella console:

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

Oppure potete usare il metodo forEach() due volte:

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

Output:

Work9Eat1Commute2Play Game1Sleep7Study2

In questo tutorial, avete imparato come usare un array di array per creare un array multidimensionale in JavaScript.