JavaScript: Unterschied zwischen .forEach () und .map ()

Ich weiß, dass es viele solche Themen gab. Und ich kenne die Grundlagen: .forEach()arbeitet mit dem ursprünglichen Array und .map()mit dem neuen.

In meinem Fall:

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);

Und das wird ausgegeben:

[ -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 ]

Ich kann nicht verstehen, warum die Verwendung von practiceÄnderungswerten von bto undefined.
Es tut mir leid, wenn dies eine dumme Frage ist, aber ich bin ziemlich neu in dieser Sprache und die Antworten, die ich bisher gefunden habe, haben mich nicht befriedigt.

Sie sind nicht ein und dasselbe. Lassen Sie mich den Unterschied erklären.

forEach: Dies iteriert über eine Liste und wendet eine Operation mit Nebenwirkungen auf jedes Listenmitglied an (Beispiel: Speichern jedes Listenelements in der Datenbank)

map: Dies iteriert über eine Liste, transformiert jedes Mitglied dieser Liste und gibt eine andere Liste derselben Größe mit den transformierten Mitgliedern zurück (Beispiel: Transformieren der Liste von Zeichenfolgen in Großbuchstaben)

Verweise

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Führt eine bereitgestellte Funktion einmal pro Array-Element aus."

• Array.map "Erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element in diesem Array."

Gibt forEachalso eigentlich nichts zurück. Es ruft nur die Funktion für jedes Array-Element auf und dann ist es fertig. Was auch immer Sie innerhalb dieser aufgerufenen Funktion zurückgeben, wird einfach verworfen.

Auf der anderen Seite mapwird die Funktion für jedes Array-Element auf ähnliche Weise aufgerufen, aber anstatt den Rückgabewert zu verwerfen, wird sie erfasst und ein neues Array dieser Rückgabewerte erstellt.

Dies bedeutet auch , dass Sie könnte verwenden , mapwo immer Sie verwenden , forEachaber Sie sollten immer noch nicht tun, so dass Sie nicht sammeln die Rückgabewerte ohne einen bestimmten Zweck. Es ist nur effizienter, sie nicht zu sammeln, wenn Sie sie nicht benötigen.

+ ---------------- + -------------------------------- ----- + ----------------------------------- +
| | foreach | Karte |
+ ---------------- + -------------------------------- ----- + ----------------------------------- +
| Funktionalität | Führt eine bestimmte Operation für jeden | aus Führt die angegebene "Transformation" für | aus
| | Element des Arrays | "Kopie" jedes Elements |
+ ---------------- + -------------------------------- ----- + ----------------------------------- +
| Rückgabewert | Gibt undefinierte | zurück Gibt ein neues Array mit transformiertem | zurück
| | | Elemente, die das ursprüngliche Array zurücklassen |
| | | unverändert |
+ ---------------- + -------------------------------- ----- + ----------------------------------- +
| Bevorzugt | Nicht-Transformation durchführen wie | Array mit Ausgabe von | erhalten
| Nutzungsszenario | Verarbeitung für jedes Element. | Einige Verarbeitungen für jedes Element
| und Beispiel | | des Arrays. |
| | Speichern Sie beispielsweise alle Elemente in | |
| | die Datenbank | Beispiel: Erhalten eines Arrays von |
| | | Längen jeder Zeichenfolge in der |
| | | Array |
+ ---------------- + -------------------------------- ----- + ----------------------------------- +

Der Hauptunterschied, den Sie kennen müssen, besteht darin, .map()ein neues Array zurückzugeben, während .forEach()dies nicht der Fall ist. Deshalb sehen Sie diesen Unterschied in der Ausgabe. .forEach()arbeitet nur mit jedem Wert im Array.

Nachlesen:

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

Vielleicht möchten Sie auch Folgendes überprüfen: - Array.prototype.every()- JavaScript | MDN

forEach: Wenn Sie eine Aktion für die Elemente eines Arrays ausführen möchten und diese für die Schleife verwenden. Das Ergebnis dieser Methode gibt uns keine Ausgabe-Kauf-Schleife durch die Elemente.

map: Wenn Sie eine Aktion für die Elemente eines Arrays ausführen und die Ausgabe Ihrer Aktion in einem Array speichern möchten. Dies ähnelt der for-Schleife innerhalb einer Funktion, die das Ergebnis nach jeder Iteration zurückgibt.

Hoffe das hilft.

Der Unterschied liegt in dem, was sie zurückgeben. Nach der Ausführung:

arr.map()

gibt ein Array von Elementen zurück, die sich aus der verarbeiteten Funktion ergeben; während:

arr.forEach()

gibt undefiniert zurück.

Leistungsanalyse For-Schleifen sind schneller als map oder foreach, wenn die Anzahl der Elemente in einem Array zunimmt.

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');

Unterschied zwischen Foreach & Map:

Map () : Wenn Sie map verwenden, kann map durch Iteration des Hauptarrays ein neues Array zurückgeben.

Foreach () : Wenn Sie Foreach verwenden, kann es nicht für jedes iterierende Hauptarray etwas zurückgeben.

useFul-Link : Verwenden Sie diesen Link, um Unterschiede zu verstehen

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

Eine Sache, die hervorgehoben werden muss, ist, dass foreach nicht initialisierte Werte überspringt, während die Karte dies nicht tut.

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];

Unterschied zwischen forEach () & map ()

forEach () durchläuft einfach die Elemente. Es wirft Rückgabewerte weg und gibt immer undefiniert zurück. Das Ergebnis dieser Methode gibt uns keine Ausgabe.

Die map () - Schleife durch die Elemente weist Speicher zu und speichert Rückgabewerte durch Iteration des Hauptarrays

Beispiel:

   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 () ist schneller als forEach ()

Map wird implizit zurückgegeben, forEach nicht.

Aus diesem Grund verwenden Sie beim Codieren einer JSX-Anwendung fast immer map anstelle von forEach, um Inhalte in React anzuzeigen .

forEach () :

Rückgabewert: undefiniert

originalArray: nach dem Methodenaufruf geändert

map () :

Rückgabewert: Neues Array, das mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array gefüllt ist

originalArray: nach dem Methodenaufruf nicht geändert