Articolo originale: https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/
Il metodo forEach di JavaScript è uno di svariati metodi per iterare sugli array. Ogni metodo ha funzionalità diverse, e sta a te decidere quale usare, a seconda di quello che stai facendo.
In questa guida vedremo nel dettaglio il metodo forEach di JavaScript.
Considerando il seguente array:
const numbers = [1, 2, 3, 4, 5];Usare il tradizionale ciclo for per iterare sull'array sarebbe così:
for (i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
} Cosa rende il metodo forEach differente?
Il metodo forEach viene anche adoperato per iterare sugli array, ma usa una funzione a differenza del classico "for loop".
Il metodo forEach passa una funzione callback per ogni elemento dell'array con i seguenti parametri:
- Valore corrente (obbligatorio): il valore dell'attuale elemento dell'array
- Indice (facoltativo): l'indice dell'elemento attuale
- Array (facoltativo): l'oggetto array a cui appartiene l'elemento attuale
Analizziamo questi parametri passo a passo.
Prima di tutto, per iterare su un array usando il metodo forEach, hai bisogno di una funzione callback (o funzione anonima):
numbers.forEach(function() {
// code
});La funzione sarà eseguita per ogni singolo elemento dell'array. Deve avere almeno un parametro che rappresenta gli elementi dell'array.
numbers.forEach(function(number) {
console.log(number);
});Questo è tutto quello che dobbiamo fare per iterare sull'array:
In alternativa, puoi usare la funzione freccia di ES6 per semplificare il codice:
numbers.forEach(number => console.log(number));Parametri facoltativi
Indice
Ok, adesso continuiamo con i parametri opzionali. Il primo è il parametro "indice", che rappresenta il numero dell'indice di ogni elemento.
In pratica, possiamo vedere il numero di indice di un elemento se lo includiamo come secondo parametro:
numbers.forEach((number, index) => {
console.log('Index: ' + index + ' Value: ' + number);
});
Array
Il parametro array è l'array stesso. Anche questo parametro è opzionale e può essere usato in varie operazioni. Se lo invochiamo, sarà visualizzato nella console tante volte quanti sono gli elementi nell'array:
numbers.forEach((number, index, array) => {
console.log(array);
});
Puoi vedere un esempio dell'uso del metodo forEach in questo video:
Supporto dai browser
Il metodo Array.forEach è supportato da tutti i browser tranne IE versione 8 e precedenti:
Grazie per aver letto!