JS的map()方法本身不修改调用数组，为何示例代码会改变原数组？

你对map()的基础认知不存在错误，map()本身的默认行为是不会修改调用它的原数组，只会返回一个携带处理后结果的新数组。你遇到的原数组被修改的情况，是你主动在回调函数中操作原数组引用导致的，不属于map()本身的内置行为。 #

问题原因分析 #

你代码中map()回调的第三个参数arr1，本质就是原数组arr的直接引用，不是拷贝副本：

• 你在回调内执行arr1[index] = num * 2的操作，属于手动通过引用修改原数组的元素，和map()本身的逻辑无关
• 你这段代码甚至完全不需要接收map()的返回值，仅靠回调里的赋值逻辑就会修改原数组

正确使用示例 #

正常使用map()时不需要操作原数组，直接返回处理后的值即可，此时原数组不会被修改：

const arr = [1, 2, 3, 4, 5];
// 直接返回处理后的结果，不操作原数组引用
const newArr = arr.map(num => num * 2);
console.log(arr); // 原数组保持不变：[1, 2, 3, 4, 5]
console.log(newArr); // 新数组为处理后结果：[2, 4, 6, 8, 10]

额外注意事项 #

如果数组元素是引用类型（比如对象、数组），即使你没有主动操作原数组引用，直接修改回调拿到的元素属性/元素内容，也会修改原数组中的对应元素：

const objArr = [{count: 1}, {count: 2}];
const newArr = objArr.map(item => {
  item.count *= 2; // 修改引用类型元素的属性，会同步修改原数组内的元素
  return item;
});
console.log(objArr[0].count); // 输出2，原数组元素被修改

要避免这种情况，需要先对引用类型元素做浅拷贝再修改：

const newArr = objArr.map(item => {
  // 浅拷贝原对象，修改拷贝后的值，不影响原数组
  return {...item, count: item.count * 2};
});

内容的提问来源于stack exchange，提问作者rajesh