JavaScript forEach - Come eseguire il ciclo attraverso un array in JS

Il metodo JavaScript forEach è uno dei diversi modi per scorrere gli array. Ogni metodo ha caratteristiche diverse e sta a te, a seconda di cosa stai facendo, decidere quale usare.

In questo post, daremo un'occhiata più da vicino al metodo JavaScript forEach.

Considerando che abbiamo il seguente array di seguito:

const numbers = [1, 2, 3, 4, 5];

Usare il tradizionale "ciclo for" per scorrere l'array sarebbe come questo:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

Cosa rende diverso il metodo forEach ()?

Il metodo forEach viene utilizzato anche per eseguire il ciclo degli array, ma utilizza una funzione diversa dal classico "ciclo for".

Il metodo forEach passa una funzione di callback per ogni elemento di un array insieme ai seguenti parametri:

  • Valore corrente (obbligatorio): il valore dell'elemento dell'array corrente
  • Indice (opzionale): il numero di indice dell'elemento corrente
  • Array (opzionale) - L'oggetto array a cui appartiene l'elemento corrente

Lasciatemi spiegare questi parametri passo dopo passo.

In primo luogo, per eseguire il ciclo attraverso un array utilizzando il metodo forEach, è necessaria una funzione di callback (o una funzione anonima):

numbers.forEach(function() { // code });

La funzione verrà eseguita per ogni singolo elemento dell'array. Deve richiedere almeno un parametro che rappresenta gli elementi di un array:

numbers.forEach(function(number) { console.log(number); });

Questo è tutto ciò che dobbiamo fare per scorrere l'array:

In alternativa, è possibile utilizzare la rappresentazione della funzione freccia ES6 per semplificare il codice:

numbers.forEach(number => console.log(number));

Parametri opzionali

Indice

Bene, ora continuiamo con i parametri opzionali. Il primo è il parametro "index", che rappresenta il numero di indice di ogni elemento.

Fondamentalmente, 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); });

Vettore

Il parametro array è l'array stesso. Inoltre è opzionale e può essere utilizzato, se necessario, in varie operazioni. Altrimenti, se lo chiamiamo, verrà stampato tante volte quante sono gli elementi dell'array:

numbers.forEach((number, index, array) => { console.log(array); });

Puoi vedere l'uso di esempio del metodo forEach () in questo video:

Supporto browser

Il metodo Array.forEach è supportato in tutti i browser, ad eccezione di IE versione 8 o precedente:

Se vuoi saperne di più sullo sviluppo web, non esitare a visitare il mio canale Youtube.

Grazie per aver letto!