.forEach()

Il metodo .forEach() provvede ad eseguire una funzione per ogni elemento dell'array.

Sintassi

// Arrow function
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function (element) { /* … */ })
forEach(function (element, index) { /* … */ })
forEach(function (element, index, array) { /* … */ })
forEach(function (element, index, array) { /* … */ }, thisArg)

Parametri

callbackFn : Una funzione da eseguire per ogni elemento nell'array. Il suo valore di ritorno viene scartato. La funzione è chiamata con i seguenti argomenti:

element : L'elemento corrente processato nell'array.

index : L'indice del l'elemento corrente processato nell'array.

array : l'array chiamato al forEach()

thisArg - Opzionale : Un valore da utilizzare come this durante l'esecuzione di callbackFn

Return

undefined

Descrizione

Il metodo .forEach() è un mtodo iterativo. Chiama una funzione di callbackFn fornita per ogni elemento dell'array in ordine ascendente di indice. A differenza di .map() , forEach() ritorna sempre un valore undefined e non concatenabile. Il tipico caso d'uso è di eseguire effetti collaterali alla fine della catena.

callabackFn è invocato solo per gli indici di array che hanno valori assegnati. Non è invocabile per gli slot vuoti negli array sparsi.

.forEach() non muta l'array originale quando viene chiamato, ma la funzione fornita come callbackn può. Nota, come sempre la lunghezza dell'array  è salvata prima dell'invocazione di callbackFn . Quindi:

  • callbackFn non visita nessun elemento aggiunto oltre la lunghezza dell'array iniziale quando la chiamata a .forEach() è iniziata.
  • Cambiamenti ad indici già visitati non causano il richiamo di callbackFn su di essi.
  • Se un elemento dell'array esistente, non ancora visitato, viene modificato da callbackFn, il suo valore sarà il valore nel momento in l'elemento viene visitato. 
  • Gli elementi eliminati non vengono visitati.

Il metodo .forEach() è generico. Lui si aspetta che il valore this abbia una proprietà length e proprietà con chiave intera.

Non c'è nessun modo di stoppare o interrompere il ciclo .forEach() se non lanciando un eccezzione. Se hai bisogno di tale comportamento stai utilizzando il metodo sbagliato.

La terminazione anticipata può essere eseguita con istruzioni cicliche come for, for...of e for...in. Anche i metodi array come every(), some(), find() e findIndex() interrompono immediatamente l'iterazione quando non è necessaria un'ulteriore iterazione.

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// Naively expected output: 14
// Actual output: 0

Esempi

Uso in array sparsi

Utilizzo di .forEach() negli array sparsi. La funzione di callbackFn non viene invocata per il valore mancante all'indice 2.

const arraySparse = [1, 3, /* empty */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

Modifca durante l'iterazione

Quando viene raggiunta la voce contenente il valore due, la prima voce dell'intero array viene spostata, con il risultato che tutte le voci rimanenti si spostano verso l'alto di una posizione. Poiché l'elemento quattro si trova ora in una posizione precedente nell'array, il tre verrà saltato.

 

const words = ["one", "two", "three", "four"];
words.forEach((word) => {
  console.log(word);
  if (word === "two") {
    words.shift(); //'one' will delete from array
  }
}); // one // two // four

console.log(words); // ['two', 'three', 'four']

non-array objects

Il metodo .forEach() legge la proprietà length di this e dopo accede ad ogni indice intero.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

Contenuti