为何JavaScript的map函数不会修改原数组中的值？

嘿，你的这个认知确实有个小误区，咱们一步步理清楚：

首先看你写的这段代码：

const array = [ 1, 2, 3 ]
array.map(item => { item = item + 1 })
console.log(array) // 输出依然是 [1, 2, 3]

核心原因：基本类型是按值传递的 #

你的数组里存的是数字（基本类型），当map遍历的时候，回调里的item其实是原数组元素的值副本，不是原元素的引用。你做item = item + 1只是修改了这个副本的值，原数组里的元素根本没被触动。

再说说map方法本身的定位 #

map的设计目的是返回一个新数组，里面是每个元素经过回调处理后的结果，它本身不会修改原数组（除非你在回调里主动操作原数组的索引）。你现在的代码里完全没接收map返回的新数组，等于白执行了一遍遍历。

正确的做法 #

如果想要得到修改后的数组，应该接收map的返回值：

const array = [1, 2, 3]
const newArray = array.map(item => item + 1)
console.log(newArray) // 输出 [2, 3, 4]
console.log(array) // 原数组保持不变 [1, 2, 3]

如果非要修改原数组（虽然不推荐，因为会破坏数据不可变性），可以通过索引操作：

const array = [1, 2, 3]
array.forEach((item, index) => {
  array[index] = item + 1
})
console.log(array) // 输出 [2, 3, 4]

补充：引用类型的情况 #

要是数组里存的是对象（引用类型），情况就不一样了：

const array = [{ num: 1 }, { num: 2 }, { num: 3 }]
array.map(item => { item.num = item.num + 1 })
console.log(array) // 输出 [{ num: 2 }, { num: 3 }, { num: 4 }]

这时候item是原对象的引用，修改它的属性会直接影响原数组里的对象。但如果是给item重新赋值一个新对象，那还是不会改变原数组，因为这相当于断开了和原引用的连接：

const array = [{ num: 1 }, { num: 2 }, { num: 3 }]
array.map(item => { item = { num: item.num + 1 } })
console.log(array) // 依然是原来的 [{ num: 1 }, ...]

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