map和forEach易错点总结 超详细

在数据处理过程中，总是把forEach和map弄混，不清楚什么时候回改变原数据，特此记录
大佬文章

map 和forEach 的区别

map

有映射的意思，所以会返回新数组，需要有return

forEach

单纯的循环，没有返回值，不会生成新数组

什么时候会修改原数据

数组中的元素是值类型

这种情况下，map和forEach一般都不会修改原数组

• forEach

let arr2 = [1, 2, 3];
arr2.forEach((item) => {
  item = item + 100;
});
console.log("arr2", arr2);

• map

let arr2 = [1, 2, 3];
let arr3 = [];
arr3 = arr2.map((item) => {
  return (item = item + 100);
});
console.log("map_____arr2", arr2);
console.log("map_____新的arr3！！！", arr3);

可以看到 原来的数组arr2没有改变，但是返回的数组arr3改变了，

所以，你想用map修改原来的数组也很简单，就用原来的数组承接返回数组就好了

let arr2 = [1, 2, 3];
// 用原来的数组承接
arr2 = arr2.map((item) => {
  return (item = item + 100);
});
console.log("map_____用原来的数组承接arr2", arr2);

数组中的元素是引用类型

• forEach

let arr1 = [
  { name: "鸣人", age: 16 },
  { name: "佐助", age: 17 },
];
arr1.forEach((item) => {
  item.age = item.age + 1000;
});
console.log("arr1", arr1);

原数组修改成功！！！！！


咱就对比一下，和上面的值类型代码👇 没有区别

• map

let arr1 = [
 { name: "鸣人", age: 16 },
 { name: "佐助", age: 17 },
];

let arr3 = [];
arr3 = arr1.map((item) => {
 return (item.age = item.age + 1000);
});
console.log("map_____arr1", arr1);
console.log("map_____新的arr3！！！", arr3);

原数组修改成功！！！

解释：

是函数形参和实参的关系。当函数的实参是引用类型，对形参的更改也会影响实参。当函数的实参是值类型，对形参的更改不会影响实参。

所以，可以粗暴的得出结论：
当数组中元素是值类型，forEach和map不会改变原数组；当是引用类型，则可以改变原数组

修改原数组的方法

• forEach
  如果你想要修改数组 arr2 中的元素，你可以使用 forEach 的第二个参数来获取元素的索引，然后通过索引来修改数组元素的值。下面是一个例子：

let arr2 = [1, 2, 3];
arr2.forEach((item, index) => {
  arr2[index] = item + 100;
});

console.log("forEach非要修改————arr2", arr2);

或者用3个参数，但不如上面的方便哈

let arr2 = [1, 2, 3];
arr2.forEach((item, index, array) => {
  array[index] = item + 100; // 直接使用索引修改原数组
});
console.log("forEach_____arr2", arr2);

在这个修改后的版本中，通过使用索引直接访问并修改数组 arr2，原数组中的元素会被更新。

在JavaScript数组的forEach方法里，你可以传递一个回调函数，这个函数可以接受最多三个参数：

1. item: 当前正在处理的数组元素的值。
2. index: 当前正在处理的数组元素的索引。
3. array: 正在被遍历的数组本身（即forEach调用所在的数组对象）。
   
   使用forEach循环直接操作和修改数组的元素不是一种常见做法，因为有其他更具表现力的函数式方法可以生成新的数组而不改变原数组，如map方法。但是，如果你的目标是对现有数组进行就地修改，forEach可以胜任这个工作。

• map
  上面提到过的，用原来的数组承接

let arr2 = [1, 2, 3];
// 用原来的数组承接
arr2 = arr2.map((item) => {
 return (item = item + 100);
});
console.log("map_____用原来的数组承接arr2", arr2);

当然用第二个参数也可以修改原数组：

    let arr2 = [1, 2, 3];
    arr2.map((item, index) => {
      arr2[index] = item + 100;
    });

    console.log("forEach非要修改————arr2", arr2); // [101, 102, 103]

3个参数的方法：

let arr2 = [1, 2, 3];

let arr4 = arr2.map((item, index, array)=> {
  array[index] = item + 100; // 这里直接修改了原始数组的元素
  return item + 100; // 返回新值，构成一个新的数组
});
console.log('arr2原来的数据',arr2); // 输出 [101, 102, 103]，原始数组被修改了
console.log('新数组arr4____',arr4); // 输出 [101, 102, 103]，这是新的数组