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

#### 一、用法：

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

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

-   元素为基本数据类型的数组

let arr = [1, 2, 3, 4, 5];
    arr.forEach((num, index) => {
        return num*2
    });
    //执行结果 arr=[2,4,6,8,10]

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

const objArr = [{
         name: 'gtt1',
         age: 22
     }, {
         name: 'gtt2',
         age: 33
     }]
     objArr.forEach(item => {
         if (item.name === 'gtt1') {
             item.age = 88
         }
     })
     console.log(objArr); // [{name: "gtt1", age: 22},{name: "gtt2", age: 88}]

2.  map()方法不会更改原数组，而是返回新的数组；

let doubled = arr.map(num => {
        return num * 2;
    });
    //doubled=[2,4,6,8,10]

#### 二、优缺点

-   map的执行速度更快，比forEach的执行速度快了70%；

#### 三、适用场景

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

let arr = ['a','b','c']
    arr.forEach(item=>{
    	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()返回新的数组

2024-04-17 09:47 by admin 50 0

注：本文转载自https://blog.csdn.net/zyqgt960812/article/details/123595922，如有侵权行为，请联系我们，我们会及时删除。

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

热门文章