map和forEach的解析

1. 共同点

1. 都只能遍历数组

2. 都相当于封装好的单层for循环，有三个参数（每一项、索引值、原数组）

3. 封装匿名函数中的this都指向window

4. 都无法中断循环

5. 都有回调函数，且回调函数中有异步函数

2. 不同点

a. 原理差异

i. forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化

ii. map遍历会分配新的内存空间生成一个新的数组，所以新的数组值不会发生变化。

b. 返回值不同：

1. forEach返回的是undefined

2. map会分配内存空间存储新数组并返回

const arr = [1,2,3]
// forEach
const a = [];
arr.forEach(item => {
    a.push(item + 1)
})

// map
const a = arr.map(item => item + 1)

上述代码中，由于forEach只返回undefined，所以我们需要提前新建一个空数组传递到forEach中，才能够承接转换后的数组。而map会直接返回新的数组，所以直接可以用一个变量承接map的返回值，这种情况下建议使用map

c. 链接其他方法

i. 因为forEach返回的是undefined所以无法链接其他方法

ii. map方法可以输出新的数据，所以个可以和其他数组方法链接使用（reduce、sort、filter等），可以在一条语句中完成多个操作

const arr = [1,2,3]

// forEach
const a = []
let sum = 0;
arr.forEach(item => a.push(item + 1));
sum.forEach(item => sum += item)

// map
let sum = arr.map(item => item + 1).reduce((total,value) => total + value)

d. 性能差异

i. 由于原理导致涉及到转换元素输出时map明显操作更快

// Array:
let arr = []

// 生成原始数组
for( let i = 0; i < 100000; i++) {
    arr.push(Math.floor((Math.random() * 1000) + 1));
}

// forEach
console.time("forEach")
const newArr = []
arr.forEach(item => newArr.push(item * item))
console.timeEnd("forEach")

// map
console.time("map")
const newArr2 = arr.map(item => item * item);
console.timeEnd("map")

forEach: 10.80419921875 ms
map: 1.8828125 ms

复制上述代码到控制台中执行，可以得到当转换元素map的性能会明显强于forEach

3. 使用场景

a. 如果存在不转换数组且没有链式操作的情况下使用forEach

b. 如果存在转换数组的情况下建议使用map

c. 如果需要中断循环的操作下，要使用单层for循环或者for of/ for in