JavaScript数组方法之forEach和Map

forEach方法会不会改变原数组

对于forEach方法，MDN是这样说的：forEach() 不会改变其调用的数组，但是，作为 callbackFn 的函数可以更改数组。

下面通过代码来解释：

示例1

  let numbers = [3, 6, 8, 10, 12];
  let odd = 3;
  numbers.forEach(function (number) {
    if (number === odd) {
      numbers.shift(); // 3 will be deleted from array
    }
  });
  console.log(numbers);
  

上面的实例是可以改变原数组的，但是不是forEach改变的，是它里面的回调函数改变了原数组。

示例2

  let numbers = [3, 6, 8, 10, 12];
  numbers.forEach((item, index) => {
    item = 3;
  });
  console.log(numbers);
  

这样是改不了的，因为如果把数组的每一项直接拿出来操作，改不了！但是如果是一个对象数组，我们把对象的某一个属性拿出来改了，这样是会改变原数组的（涉及到堆栈存储的知识，不多讨论）。所以这就是MDN说可能改变原数组的原因。

总结

forEach不会改变原数组，但是里面的回调函数可能会改变原数组，但是往往我们使用forEach就是要改变原数组或者加工其他的值(那么回调函数就不是纯函数了)，不然它没有返回值，就没什么意义了。

Map方法会不会改变原数组

  const numbers = [1, 2, 3, 4];
  const filteredNumbers = numbers.map((num, index) => {
    if (index < 3) {
      return num;
    }
  });
  console.log(numbers);`

上面的示例中，map方法会返回一个新数组，不会改变原数组！所以map可以链式调用，有点像promise。

补充一个知识点：

空值处理

  let arr = [, , , , , "a"];
  let res = arr.map((_, index) => index);
  console.log(res);
  // [,,,,,5]
  

Map遇到空值会跳过，forEach它没有返回值（undefined）