数组操作是前端最重要的数据操作，构造数组数据，又是数组操作中很常见的。本文将梳理下map和forEach方法在Vue项目中的使用。

想要深入理解这两个方法，一定要手写几次简易的实现，理解其中的要义。这里只考虑核心部分，一些边界问题就忽略了。

一、手写实现

简易map方法：

简易forEach方法：

二、二者区别

相同点：

1，都对数组的循环语句做了封装（while循环）。

2，map能做的事，forEach也能做，反之亦然。

3，两者都可以修改原数组，通过回调函数实现。当然两者的回调函数都可以不对原数组做修改。

4，在两个方法中使用return，只能结束当前这一次循环，不能结束整个循环，因为return是写在回调函数中的。

不同点：

1，map方法返回一个新数组；forEach方法返回undefined。

2，map可链式调用，forEach不可以。因为forEach总是返回undefined。

3，除了抛出异常，没有办法终止或跳出forEach循环。

三、使用场景

以下两种情况不要使用map方法。

1，不打算使用返回的新数组。

2，没有在回调函数中返回值。

举个Vue中的例子：

比如后台接口返回一个对象数据，我们需要将此对象数据构造成为一个新数组，展示到elementUi中的select下拉框中。那么我们应该用map方法呢，还是forEach呢？

let keysArr = Object.keys(data)

// 用forEach方法

// 用map方法

// 在Vue项目中，直接将res 换成给当前组件data中的数据赋值即可。
由以上例子可见，当我们需要构造一个新的数组时，两种方法都能用，但是map方法要更简洁。因此，能用map方法的地方，首先要用map方法。