JavaScript: differenza tra .forEach () e .map ()

So che c'erano molti argomenti come questo. E conosco le basi: .forEach()opera sull'array originale e .map()su quello nuovo.

Nel mio caso:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

E questo è l'output:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

Non riesco a capire perché l'utilizzo di practicemodifiche al valore di ba undefined.
Mi dispiace se questa è una domanda stupida, ma sono abbastanza nuovo in questa lingua e le risposte che ho trovato finora non mi hanno soddisfatto.

Non sono la stessa cosa. Lasciami spiegare la differenza.

forEach: Esegue l'iterazione su un elenco e applica alcune operazioni con effetti collaterali a ciascun membro dell'elenco (esempio: salvataggio di ogni elemento dell'elenco nel database)

map: Esegue un'iterazione su un elenco, trasforma ogni membro di tale elenco e restituisce un altro elenco della stessa dimensione con i membri trasformati (esempio: trasformazione di un elenco di stringhe in maiuscolo)

Riferimenti

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Esegue una funzione fornita una volta per elemento dell'array."

• Array.map "Crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento di questo array."

Quindi, in forEachrealtà non restituisce nulla. Chiama semplicemente la funzione per ogni elemento dell'array e poi è fatto. Quindi qualunque cosa tu ritorni all'interno di quella funzione chiamata viene semplicemente scartata.

D'altra parte, mapchiamerà in modo simile la funzione per ogni elemento dell'array, ma invece di scartare il suo valore di ritorno, lo catturerà e costruirà un nuovo array di quei valori di ritorno.

Questo significa anche che si può usare mapovunque si sta utilizzando forEach, ma ancora non dovrebbe fare che così non si raccolgono i valori di ritorno, senza alcuno scopo. È solo più efficiente non raccoglierli se non ne hai bisogno.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | mappa |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Funzionalità | Esegue una determinata operazione su ogni | Esegue la "trasformazione" data su |
| | elemento dell'array | "copia" di ogni elemento |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Valore restituito | Restituisce undefined | Restituisce un nuovo array con |
| | | elementi che lasciano l'array originale |
| | | invariato |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Preferibile | Esecuzione della non trasformazione come | Ottenere un array contenente l'output di |
| scenario di utilizzo | elaborazione su ogni elemento. | alcune elaborazioni eseguite su ogni elemento |
| ed esempio | | dell'array. |
| | Ad esempio, salvando tutti gli elementi in | |
| | il database | Ad esempio, ottenere un array di |
| | | lunghezze di ogni stringa nel |
| | | matrice |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

La principale differenza che devi sapere è che .map()restituisce un nuovo array mentre .forEach()non lo fa. Ecco perché vedi questa differenza nell'output. .forEach()opera solo su ogni valore dell'array.

Documentarsi:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Potresti anche controllare: - Array.prototype.every()- JavaScript | MDN

forEach: se vuoi eseguire un'azione sugli elementi di un Array ed è la stessa che usi per il ciclo. Il risultato di questo metodo non ci fornisce un output che acquista solo un ciclo tra gli elementi.

map: se vuoi eseguire un'azione sugli elementi di un array e vuoi anche memorizzare l'output della tua azione in un array. Questo è simile al ciclo for all'interno di una funzione che restituisce il risultato dopo ogni iterazione.

Spero che questo ti aiuti.

La differenza sta in quello che restituiscono. Dopo l'esecuzione:

arr.map()

restituisce un array di elementi risultanti dalla funzione elaborata; mentre:

arr.forEach()

restituisce undefined.

L'analisi delle prestazioni per i cicli è più veloce di map o foreach all'aumentare del numero di elementi in un array.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Differenza tra Foreach e mappa:

Map () : se si utilizza map, map può restituire un nuovo array iterando l'array principale.

Foreach () : se si utilizza Foreach, non può restituire nulla per ogni possibile ripetizione dell'array principale.

useFul link : usa questo link per capire la differenza

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Una cosa da sottolineare è che foreach salta i valori non inizializzati mentre map no.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Differenza tra forEach () e map ()

forEach () si limita a scorrere gli elementi. Elimina i valori di ritorno e restituisce sempre undefined.Il risultato di questo metodo non fornisce un output.

map () il ciclo attraverso gli elementi alloca memoria e memorizza i valori di ritorno iterando l'array principale

Esempio:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () è più veloce di forEach ()

Map restituisce implicitamente mentre forEach non lo fa.

Questo è il motivo per cui quando codifichi un'applicazione JSX, usi quasi sempre map invece di forEach per visualizzare il contenuto in React .

forEach () :

valore restituito: undefined

originalArray: modificato dopo la chiamata al metodo

mappa () :

valore di ritorno: nuovo Array popolato con i risultati della chiamata di una funzione fornita su ogni elemento dell'array chiamante

originalArray: non modificato dopo la chiamata al metodo