JS中Map和ForEach的区别

红太狼 2020-06-18 16:08 877阅读 0赞

# JS中Map和ForEach的区别

如果你已经有使用JavaScript的经验，你可能已经知道这两个看似相同的方法：`Array.prototype.map()`和`Array.prototype.forEach()。`那么，它们到底有什么区别呢？

### 定义

我们首先来看一看MDN上对Map和ForEach的定义：

- forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。
- map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

到底有什么区别呢？`forEach()`方法不会返回执行结果，而是`undefined`。也就是说，`forEach()`会修改原来的数组。而`map()`方法会得到一个新的数组并返回。

**示例**

下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用`map`和`forEach`来达到目的。

```javascript
let arr = [1, 2, 3, 4, 5];
```

**ForEach**

注意，forEach是不会返回有意义的值的。

我们在回调函数中直接修改`arr`的值。

```javascript
arr.forEach((num, index) => {    
    return arr[index] = num * 2;}
);
```

执行结果如下：

```javascript
// arr = [2, 4, 6, 8, 10]
```

**Map**

```javascript
let doubled = arr.map(num => {
    return num * 2;
});
```

执行结果如下：

```java
// doubled = [2, 4, 6, 8, 10]
```

**执行速度对比**

**jsPref**是一个非常好的网站用来比较不同的JavaScript函数的执行速度。

这里是`forEach()`和`map()`的测试结果：

![1.png](C:\Users\kf\Downloads\1592013688153885.png)

可以看到，在我到电脑上`forEach()`的执行速度比`map()`慢了70%。每个人的浏览器的执行结果会不一样。

**函数式角度的理解**

如果你习惯使用函数是编程，那么肯定喜欢使用`map()`。因为`forEach()`会改变原始的数组的值，而`map()`会返回一个全新的数组，原本的数组不受到影响。

**哪个更好呢？**

取决于你想要做什么。

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

```javascript
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d
```

`map()`适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

```javascript
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()返回新的数组。

发表评论取消回复

表情：

评论列表（有 0 条评论，877人围观）

还没有评论，来说两句吧...

相关阅读

相关 map()和forEach()的区别和理解

map()和forEach()的区别和理解如果你已经有使用JavaScript的经验，你可能已经知道这两个看似相同的方法： Array.prototype.map(

红太狼/ 2024年04月08日 10:18/ 0 赞/ 14 阅读

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

![format_png][] 英文 | https://codingnconcepts.com/ 今天我们来看一下 Array中 Array.forEach()和 Arr

一时失言乱红尘/ 2023年01月01日 07:50/ 0 赞/ 189 阅读

相关 map()和forEach()的区别和理解

map()和forEach()的区别和理解如果你已经有使用JavaScript的经验，你可能已经知道这两个看似相同的方法： Array.prototype.map(

た入场券/ 2022年12月29日 15:26/ 0 赞/ 86 阅读

相关 JS中map和foreach的区别以及some和every的用法

转载自：[小猪冒泡][Link 1] 的 [原生JS forEach()和map()遍历][JS forEach_map] 一、原生JS forEach()和map()遍历

你的名字/ 2022年12月11日 02:25/ 0 赞/ 163 阅读

相关 js中的forEach和map循环的区别

foreach又叫做增强for循环,相当于for循环的简化版，foreach(元素类型元素名称：循环对象（数组、集合）)\{ 循环语句 \} forEach能不能

偏执的太偏执、/ 2022年10月18日 01:45/ 0 赞/ 154 阅读

相关 js中forEach、map

JavaScript数组的 forEach()方法调用数组中的每个元素。语法 array.forEach(callback[, thisObject]); 下

客官°小女子只卖身不卖艺/ 2022年06月15日 11:17/ 0 赞/ 148 阅读

相关 javascript map, forEach的区别和共同点

javascript map, forEach的区别和共同点共同点 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面

墨蓝/ 2022年05月21日 00:44/ 0 赞/ 193 阅读

相关 js中map方法和forEach方法的区别

红宝书中的定义： map():对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。 forEach():对数组的每一项运行给定函数，无返回值。 forEach(

电玩女神/ 2022年04月16日 06:06/ 0 赞/ 216 阅读

相关数组中的forEach和map的区别

如何使用简单来说：当你遍历数组想要返回一个新的数组时使用map，如果你仅仅想遍历这个数组而不想返回一个新数组那么使用forEach。大多数情况下，我们都要对数

左手的ㄟ右手/ 2021年09月19日 04:20/ 0 赞/ 345 阅读

相关 JS中Map和ForEach的区别

JS中Map和ForEach的区别如果你已经有使用JavaScript的经验，你可能已经知道这两个看似相同的方法：Array.prototype.map()和Array...

红太狼/ 2020年06月18日 16:08/ 0 赞/ 878 阅读