Cicli sugli array in

Informazioni su Cicli sugli array

Quando lavori con gli array, a volte vuoi eseguire del codice per ogni valore dell'array. Questa operazione si chiama iterazione sull'array.

Qui vedremo il caso in cui non vuoi modificare l'array durante il procedimento. Per trasformare gli array, vedi invece il concetto Trasformazioni degli array.

Il ciclo for

Il modo più elementare e di solito molto performante per iterare su un array è usare un ciclo for, vedi il concetto Cicli for.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

Il ciclo for...of

Quando vuoi lavorare direttamente con il valore a ogni iterazione e non ti serve affatto l'indice, puoi usare un ciclo for...of.

for...of funziona come il ciclo for di base mostrato sopra, ma invece di dover gestire l'indice come variabile del ciclo, ricevi direttamente il valore.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Proprio come nei normali cicli for, puoi usare continue per interrompere l'iterazione corrente e break per fermare del tutto l'esecuzione del ciclo.

JavaScript ha anche un ciclo for...in per iterare sulle chiavi di un oggetto. È importante notare che for...of e for...in non sono intercambiabili: per i dettagli, vedi la documentazione di MDN.

Il metodo forEach

Ogni array include un metodo forEach che può essere usato anche per iterare sugli elementi dell'array.

forEach accetta una callback come parametro. La funzione di callback viene chiamata una volta per ogni elemento dell'array.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

Nell'esempio sopra la callback usa come parametro solo l'elemento corrente. Se serve, la callback può utilizzare fino a tre parametri.

• il valore dell'iterazione corrente
• l'indice dell'iterazione corrente
• l'intero array

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Oltre alla callback, forEach accetta come secondo parametro opzionale il contesto this da usare per l'iterazione. Puoi vedere un esempio nella sezione "Using thisArg" su MDN.

Ci sono un paio di cose da tenere a mente quando lavori con forEach.

• Non c'è modo di fermare l'iterazione una volta che il ciclo forEach è partito. Le istruzioni break e continue non esistono in questo contesto.
• forEach si comporta in modo strano se modifichi l'array dopo aver avviato il ciclo. Gli elementi che aggiungi in fondo vengono ignorati, rimuovere elementi può farne saltare altri, e così via. Per evitare questo tipo di problemi, non modificare mai l'array di partenza all'interno della callback.
• Il valore restituito dal metodo forEach stesso è undefined. Per questo motivo, non puoi concatenare altri metodi degli array in coda.
• Se devi ottimizzare il codice per le prestazioni, valuta di usare for o for...of: entrambi sono circa tre volte più veloci.