【面试题】940- forEach() 和 map() 的区别

梦里梦外; 2023-01-17 08:18 116阅读 0赞

![8ef07abcff2302ae821a710dda06eef6.png][]

今天我们来看一下 Array中 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 < 1000000; i++ ) {
        numbers.push(Math.floor((Math.random() * 1000) + 1));
    }
    
    // 1. forEach()
    console.time("forEach");
    const squareUsingForEach = [];
    numbers.forEach(x => 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; // <- SyntaxError 
      squareUsingForEach.push(x*x);
    });
    
    // break; inside map()
    const squareUsingMap = numbers.map(x => {
      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;insidefor-ofloop
    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循环。

本文完〜

来源 | https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/

![7dd35eb21f4df969956fca7d8cce9c04.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![3cfb3873236e4bc52ebe1136058db168.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[8ef07abcff2302ae821a710dda06eef6.png]: /images/20221021/d0daa295107a4f9897913de267b0e53f.png
[7dd35eb21f4df969956fca7d8cce9c04.gif]: /images/20221021/bdd8422f0f814ffeb6d2ef7254a0509a.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[3cfb3873236e4bc52ebe1136058db168.gif]: /images/20221021/0e07560a88974a38a486bc744a3c692a.png