JS中的遍历方法forEach和map的区别

一、用法:

同为[遍历数组的方法][1],两者的用法区别在于:

  1. forEach()会改变原数组的方法(元素基本类型数据,不改变,类似对象数组形式会改变原数组),不会返回有意义的值。
  • 元素为基本数据类型的数组

    let arr = [1, 2, 3, 4, 5];
    arr.forEach((num, index) => {

    1. return num*2

    });
    //执行结果 arr=[2,4,6,8,10]

  • 元素为类似对象形式的数组

    const objArr = [{

    1. name: 'gtt1',
    2. age: 22

    }, {

    1. name: 'gtt2',
    2. age: 33

    }]
    objArr.forEach(item => {

    1. if (item.name === 'gtt1') {
    2. item.age = 88
    3. }

    })
    console.log(objArr); // [{name: “gtt1”, age: 22},{name: “gtt2”, age: 88}]

  1. map()方法不会更改原数组,而是返回新的数组;

    let doubled = arr.map(num => {

    1. return num * 2;

    });
    //doubled=[2,4,6,8,10]

二、优缺点

  • map的执行速度更快,比forEach的执行速度快了70%;

三、适用场景

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

    let arr = [‘a’,’b’,’c’]
    arr.forEach(item=>{

    1. console.log(item)

    })
    // a b c

  • map适用于你要改变数据值的时候,不仅在于它更快,而且返回一个新的数组,这样可以提高复用性(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;

四、核心要点

  1. 能用forEach()做到的,map()同样可以。反之亦成立
  2. map()会分配内存空间存储新数组并返回,forEach()不会返回数组
  3. forEach()允许callback更改原始数组的元素。而map()返回新的数组
注:本文转载自https://blog.csdn.net/zyqgt960812/article/details/123595922,如有侵权行为,请联系我们,我们会及时删除。