Der Unterschied zwischen forEach() und map() im Array

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Heute werfen wir einen Blick auf die Methoden Array.forEach() und Array.map() in Array-Unterschied zwischen. Array.forEach()和 Array.map()方法之间的区别。

forEach()和map()方法通常用于遍历Array元素，但几乎没有区别，我们来一一介绍。

1.返回值

forEach()方法返回undefined ，而map()返回一个包含已转换元素的新数组。

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

// 使用 forEach()
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));

// 使用 map()
const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]
console.log(squareUsingMap);     // [1, 4, 9, 16, 25]

由于forEach()返回undefined，所以我们需要传递一个空数组来创建一个新的转换后的数组。map()方法不存在这样的问题，它直接返回新的转换后的数组。在这种情况下，建议使用map()方法。

2.链接其他方法

map()方法输出可以与其他方法(如reduce()、sort()、filter())链接在一起，以便在一条语句中执行多个操作。

另一方面，forEach()是一个终端方法，这意味着它不能与其他方法链接，因为它返回undefined。

我们使用以下两种方法找出数组中每个元素的平方和：

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

// 使用 forEach()
const squareUsingForEach = []
let sumOfSquareUsingForEach = 0;
numbers.forEach(x => squareUsingForEach.push(x*x));
squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// 使用 map()
const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value)
;

console.log(sumOfSquareUsingForEach); // 55
console.log(sumOfSquareUsingMap);     // 55

当需要多个操作时，使用forEach()方法是一项非常乏味的工作。我们可以在这种情况下使用map()方法。

3.性能

// Array:
var numbers = [];
for ( var i = 0; i 9f623e67e7dafa725f8c449472b9e812 squareUsingForEach.push(x*x));
console.timeEnd("forEach");

// 2. map()
console.time("map");
const squareUsingMap = numbers.map(x => x*x);
console.timeEnd("map");

这是在MacBook Pro的 Google Chrome v83.0.4103.106（64位）上运行上述代码后的结果。 建议复制上面的代码，然后在自己控制台中尝试一下。

forEach: 26.596923828125ms
map:     21.97998046875ms

显然，map()方法比forEach()转换元素要好。

4.中断遍历

这两种方法都不能用 break 中断，否则会引发异常：

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

// break; inside forEach()
const squareUsingForEach = [];
numbers.forEach(x => { 
  if(x == 3) break; // 51b160109e97c852400ef5e1a3eb0e86 {
  if(x == 3) break; // <- SyntaxError 
  return x*x;
});

上面代码会抛出 SyntaxError：

ⓧ Uncaught SyntaxError: Illegal break statement

如果需要中断遍历，则应使用简单的for循环或for-of/for-in循环。

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

// break; inside for-of loop
const squareUsingForEach = [];
for(x of numbers){
  if(x == 3) break;
  squareUsingForEach.push(x*x);
};

console.log(squareUsingForEach); // [1, 4]

5. 最后

建议使用map()转换数组的元素，因为它语法短，可链接且性能更好。

如果不想返回的数组或不转换数组的元素，则使用forEach() 方法。

最后，如果要基于某种条件停止或中断数组的便利，则应使用简单的for循环或for-of / for-in

forEach()- und map()-Methoden werden normalerweise zum Durchlaufen von Array-Elementen verwendet, aber es gibt fast keinen Unterschied. Lassen Sie uns sie einzeln vorstellen.

1. Rückgabewert

forEach()-Methode gibt undefiniert zurück, während map() Code> Code> Gibt ein neues Array zurück, das die konvertierten Elemente enthält.

rrreee

Da forEach() undefiniert zurückgibt, müssen wir ein leeres Array übergeben, um ein neues konvertiertes Array zu erstellen. Bei der Methode map() tritt ein solches Problem nicht auf, sie gibt direkt das neu konvertierte Array zurück. In diesem Fall empfiehlt sich die Verwendung der Methode map().

2. Andere Methoden verknüpfen

Die Ausgabe der map()-Methode kann mit anderen Methoden verknüpft werden (z. B. reduce() code>, <code>sort(), filter()) werden miteinander verkettet, um mehrere Operationen in einer Anweisung auszuführen.

Andererseits ist forEach() eine Terminalmethode, was bedeutet, dass sie nicht mit anderen Methoden verkettet werden kann, da sie undefiniert zurückgibt.

Wir ermitteln die Quadratsumme jedes Elements in einem Array mithilfe der folgenden zwei Methoden: rrreeeDie Verwendung der Methode forEach() ist eine sehr mühsame Aufgabe, wenn mehrere Operationen erforderlich sind. In diesem Fall können wir die Methode map() verwenden.

3. Leistung

rrreee🎜Dies geschieht nach der Ausführung des obigen Codes auf Google Chrome v83.0.4103.106 (64-Bit) auf dem MacBook Pro Ergebnis. Es wird empfohlen, den obigen Code zu kopieren und in Ihrer eigenen Konsole auszuprobieren. 🎜rrreee🎜Offensichtlich ist die Methode map() besser als forEach() zum Konvertieren von Elementen. 🎜

4. Durchquerung unterbrechen

🎜Keine dieser beiden Methoden kann mit break unterbrochen werden, sonst wird eine Ausnahme ausgelöst: 🎜rrreee🎜Das Obige Der Code wirft SyntaxError: 🎜rrreee🎜Wenn Sie den Durchlauf unterbrechen müssen, sollten Sie eine einfache for-Schleife oder einen for-of/for-in Schleife. 🎜rrreee<h2><strong>5. Abschließend</strong></h2>🎜Es wird empfohlen, <code>map() zum Konvertieren der Elemente des Arrays zu verwenden, da es eine kurze Syntax und Verkettbarkeit aufweist bessere Leistung. 🎜🎜Wenn Sie das Array nicht zurückgeben oder die Elemente des Arrays nicht konvertieren möchten, verwenden Sie die Methode forEach(). 🎜🎜Wenn Sie schließlich die Funktionalität eines Arrays basierend auf einer Bedingung stoppen oder unterbrechen möchten, sollten Sie eine einfache for-Schleife oder for-of / for-in verwenden Schleife. 🎜🎜🎜Originaladresse: https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/🎜🎜Autor: Ashish Lahoti🎜🎜Übersetzte Adresse: https://segmentfault.com /a/1190000038421334🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen forEach() und map() im Array. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!