Detaillierte Erklärung des Unterschieds zwischen Map und ForEach in JS

Wenn Sie bereits Erfahrung mit JavaScript haben, kennen Sie möglicherweise bereits diese beiden scheinbar identischen Methoden: Array.prototype.map() und Array.prototype.forEach( ). Was ist also der Unterschied zwischen ihnen? Array.prototype.map()和Array.prototype.forEach()。那么，它们到底有什么区别呢？

定义

我们首先来看一看MDN上对Map和ForEach的定义：

• forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。
• map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

到底有什么区别呢？forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

示例

下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用map和forEach来达到目的。

let arr = [1, 2, 3, 4, 5];

ForEach

注意，forEach是不会返回有意义的值的。

我们在回调函数中直接修改arr的值。

arr.forEach((num, index) => {    
    return arr[index] = num * 2;}
);

执行结果如下： 

// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
    return num * 2;
});

执行结果如下：

// doubled = [2, 4, 6, 8, 10]

执行速度对比 

jsPref是一个非常好的网站用来比较不同的JavaScript函数的执行速度。

这里是forEach()和map()的测试结果：

可以看到，在我到电脑上forEach()的执行速度比map()慢了70%。每个人的浏览器的执行结果会不一样。你可以使用下面的链接来测试一下: Map vs. forEach - jsPref。

函数式角度的理解

如果你习惯使用函数是编程，那么肯定喜欢使用map()。因为forEach()会改变原始的数组的值，而map()会返回一个全新的数组，原本的数组不受到影响。

哪个更好呢？

取决于你想要做什么。

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

我们首先使用map将每一个元素乘以2，然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2。

核心要点

• 能用forEach()做到的，map()同样可以。反过来也是如此。
• map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
• forEach()允许callback更改原始数组的元素。map()

Definition

Werfen wir zunächst einen Blick auf die Definitionen von Map und ForEach auf MDN:

• forEach(): Wird für jedes bereitgestellte Element ausgeführt Funktion (führt eine bereitgestellte Funktion einmal für jedes Array-Element aus).
• map(): Erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.
Was ist der Unterschied? Die Methode forEach() gibt nicht das Ausführungsergebnis zurück, sondern undefiniert. Mit anderen Worten: forEach() ändert das ursprüngliche Array. Die Methode map() ruft ein neues Array ab und gibt es zurück.
Beispiel

Ein Array wird unten bereitgestellt. Wenn wir jedes Element darin verdoppeln möchten, können wir map und forEach um den Zweck zu erreichen. <p>rrreee</p> <h4 id="ForEach"> <a href="//m.sbmmt.com/course.html" target="_blank" textvalue="编程入门">ForEach</a><br> </h4> <p id="ForEach" style="white-space: normal;">Beachten Sie, dass forEach keinen aussagekräftigen Wert von zurückgibt. </p>🎜Wir ändern direkt den Wert von <code>arr in der Rückruffunktion. 🎜rrreee🎜Die Ausführungsergebnisse sind wie folgt: 🎜rrreee

🎜Map🎜

rrreee🎜Die Ausführungsergebnisse sind wie folgt: 🎜rrreee

🎜Vergleich der Ausführungsgeschwindigkeit 🎜

🎜🎜jsPref🎜 ist eine sehr gute Website zum Vergleich der Ausführungsgeschwindigkeit verschiedener JavaScript-Funktionen. 🎜🎜Hier sind die Testergebnisse von forEach() und map(): 🎜🎜🎜🎜Sie können die Ausführungsgeschwindigkeit von forEach() auf meinem Computer sehen 70 % langsamer als map(). Die Ausführungsergebnisse jedes Browsers sind unterschiedlich. Sie können den folgenden Link verwenden, um es zu testen: Map vs. forEach – jsPref 🎜. 🎜

Verstehen aus funktionaler Perspektive

🎜Wenn Sie es gewohnt sind, Funktionen zum Programmieren zu verwenden, Dann bevorzugen Sie auf jeden Fall die Verwendung von map(). Weil forEach() den Wert des ursprünglichen Arrays ändert und map() ein brandneues Array zurückgibt und das ursprüngliche Array davon nicht betroffen ist. 🎜

Welches ist besser?

🎜Hängt davon ab, was Sie tun möchten. 🎜🎜forEach eignet sich, wenn Sie nicht vorhaben, die Daten zu ändern, sondern einfach nur etwas mit den Daten machen möchten – etwa sie in einer Datenbank speichern oder ausdrucken. 🎜rrreee🎜map() eignet sich, wenn Sie den Datenwert ändern möchten. Es ist nicht nur schneller, sondern gibt auch ein neues Array zurück. Dies hat den Vorteil, dass Sie die Komposition (Kombination aus Map(), Filter(), Reduce() usw.) verwenden können, um weitere Tricks zu erstellen.
🎜rrreee🎜Wir verwenden zunächst Map, um jedes Element mit 2 zu multiplizieren, und filtern dann die Elemente heraus, die größer als 5 sind. Das Endergebnis wird arr2 zugewiesen. 🎜

Core Points

• Was mit forEach() gemacht werden kann, kann auch map() verwendet werden. Das Gegenteil ist auch der Fall. 🎜
• map() reserviert Speicherplatz zum Speichern des neuen Arrays und gibt es zurück, forEach() gibt keine Daten zurück. 🎜
• forEach() ermöglicht callback, Elemente des ursprünglichen Arrays zu ändern. map() gibt ein neues Array zurück. 🎜🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜js-Video-Tutorial🎜🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen Map und ForEach in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!