(js)map 和 forEach的区别

map 和 forEach的区别

map和forEach都是数组原型上的函数

1. 都可以遍历数组的元素。
2. 使用break都会报错。
3. 都有四个参数
4. 匿名函数中的this默认指向window
5. 对空数组不会调用回调函数

不同之处在于：

map：创建一个新数组，其内元素是对每个数组元素应用所给的函数返回的结果构成map返回的结果。

forEach：不会返回执行结果，而是undefined。其return不起作用。

forEach

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

可以利用index改变当前数组的值

const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.forEach((value, key, arr) => arr[key] = value * value)); // undefined
console.log(arr); // 1 4 9 16 25 36

map

arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

和forEach一样，都可以通过index改变当前数组的值

var new_arr = arr.map((value, key, arr) => arr[key] = value * value); // 会产生一个新的数组
console.log(new_arr); // 1 4 9 16 25 36
console.log(arr);// 1 4 9 16 25 36


const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.map((value, key) => value * value)); // 1 4 9 16 25 36 
console.log(arr); 1 2 3 4 5 6

执行速度：forEach()的执行速度 < map()的执行速度。

map和forEach使用选择：

• forEach适合于不打算改变数据，并拷贝数据。只对数据进行简单的操作

• map适合于改变数据值，且可以获得数据的拷贝，同时可以链式操作数据(利用返回值)，比如：

  res.map((value,key) => value * value).forEach(value => console.log(value));
  

  注意：拷贝的数据是浅拷贝，当数组元素有对象的时候，当修改拷贝的数据，原数据也会被修改

  const arr = [1, 2, { "m": 1 }, 3];
  var resData = arr.map(value => {
    if (typeof value === 'object') {
      value.m = 2;
      return value;
    }
    return value;
  })
  console.log(resData);// [ 1, 2, { m: 2 }, 3 ]
  console.log(arr);// [ 1, 2, { m: 2 }, 3 ]
  

  那为什么不把map以及forEach的功能集成到一起呢，forEach能实现的功能map也能实现。

作者：chen_cheng
链接：https://www.jianshu.com/p/63822d8820a7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。