JS数组中 forEach() 和 map() 的区别

开发 前端
今天我们来看一下 Array中 Array.forEach()和 Array.map()方法之间的区别。

[[359324]]

 今天我们来看一下 Array中 Array.forEach()和 Array.map()方法之间的区别。

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

1.返回值

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

  1. const numbers = [1, 2, 3, 4, 5]; 
  2.  
  3. // 使用 forEach() 
  4. const squareUsingForEach = []; 
  5. numbers.forEach(x => squareUsingForEach.push(x*x)); 
  6.  
  7. // 使用 map() 
  8. const squareUsingMap = numbers.map(x => x*x); 
  9.  
  10. console.log(squareUsingForEach); // [1, 4, 9, 16, 25] 
  11. console.log(squareUsingMap);     // [1, 4, 9, 16, 25] 

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

2.链接其他方法

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

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

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

  1. onst numbers = [1, 2, 3, 4, 5]; 
  2.  
  3. // 使用 forEach() 
  4. const squareUsingForEach = [] 
  5. let sumOfSquareUsingForEach = 0; 
  6. numbers.forEach(x => squareUsingForEach.push(x*x)); 
  7. squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square); 
  8.  
  9. // 使用 map() 
  10. const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value) 
  11.  
  12. console.log(sumOfSquareUsingForEach); // 55 
  13. console.log(sumOfSquareUsingMap);     // 55 

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

3.性能

  1. // Array: 
  2. var numbers = []; 
  3. for ( var i = 0; i < 1000000; i++ ) { 
  4.     numbers.push(Math.floor((Math.random() * 1000) + 1)); 
  5.  
  6. // 1. forEach() 
  7. console.time("forEach"); 
  8. const squareUsingForEach = []; 
  9. numbers.forEach(x => squareUsingForEach.push(x*x)); 
  10. console.timeEnd("forEach"); 
  11.  
  12. // 2. map() 
  13. console.time("map"); 
  14. const squareUsingMap = numbers.map(x => x*x); 
  15. console.timeEnd("map"); 

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

  1. forEach: 26.596923828125ms 
  2. map:     21.97998046875ms 

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

4.中断遍历

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

  1. const numbers = [1, 2, 3, 4, 5]; 
  2.  
  3. // break; inside forEach() 
  4. const squareUsingForEach = []; 
  5. numbers.forEach(x => {  
  6.   if(x == 3) break; // <- SyntaxError  
  7.   squareUsingForEach.push(x*x); 
  8. }); 
  9.  
  10. // break; inside map() 
  11. const squareUsingMap = numbers.map(x => { 
  12.   if(x == 3) break; // <- SyntaxError  
  13.   return x*x; 
  14. }); 

 上面代码会抛出 SyntaxError:

  1. ⓧ Uncaught SyntaxError: Illegal break statement 

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

  1. const numbers = [1, 2, 3, 4, 5]; 
  2.  
  3. // break; inside for-of loop 
  4. const squareUsingForEach = []; 
  5. for(x of numbers){ 
  6.   if(x == 3) break; 
  7.   squareUsingForEach.push(x*x); 
  8. }; 
  9.  
  10. console.log(squareUsingForEach); // [1, 4] 

 5. 最后

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

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

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

 

责任编辑:姜华 来源: 今日头条
相关推荐

2020-08-02 23:20:36

JavaScriptmap()forEach()

2023-06-14 08:54:09

Map方法ForEach方法

2024-03-11 01:00:00

jsfor循环

2022-10-12 14:39:27

Streammappeek

2024-08-30 08:43:24

JavaScriptforEachfor循环

2021-08-17 11:14:49

VoidJSTS

2022-09-07 11:52:48

forforEach前端

2023-05-11 07:41:03

Java 8tMap方法

2013-09-11 09:49:18

Java数组集合

2023-03-29 08:03:53

2009-08-28 17:18:55

foreach循环

2022-08-27 14:42:45

Java集合数组

2022-06-01 08:12:32

JS类数组对象

2009-06-25 15:20:28

CollectionMap

2021-03-29 12:01:00

遍历数组for循环

2022-10-27 19:32:20

切片golang数组

2023-10-12 08:25:18

Javaequals内存

2023-10-27 15:31:04

For循环Foreach循环

2021-08-04 08:33:59

TypeScriptConst Readonly

2024-01-10 08:47:48

Python函数Map()
点赞
收藏

51CTO技术栈公众号