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

恩婧

已于 2024-03-10 16:08:26 修改

阅读量3.4k

点赞数 4

分类专栏： vue.js javascript 文章标签： javascript

于 2022-03-19 15:45:41 首次发布

本文链接：https://blog.youkuaiyun.com/zyqgt960812/article/details/123595922

版权

vue.js 同时被 2 个专栏收录

18 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

本文详细介绍了JavaScript中数组遍历方法forEach和map的区别，包括用法、优缺点及适用场景。forEach会直接修改原数组，而map则返回新数组，不改变原数据。在性能上，map通常比forEach更快。适用场景方面，forEach适合不改变数据的简单操作，如打印；而map适合需要变换数据值的情况，常与其他函数组合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、用法：

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

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}]

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;

四、核心要点

能用forEach()做到的，map()同样可以。反之亦成立
map()会分配内存空间存储新数组并返回，forEach()不会返回数组
forEach()允许callback更改原始数组的元素。而map()返回新的数组