JavaScript/TypeScript中forEach与for...of遍历null数组赋值无效问题

这就是JavaScript最基础的变量赋值与值传递规则，和遍历方法本身没有关系。

• 你用forEach时拿到的回调参数e、用for...of时声明的循环变量e，都是独立的局部变量，保存的只是当前遍历位置数组元素的值副本。你执行e = {}的时候，只是修改了这个局部变量自身的存储内容，完全没有触碰原数组对应位置存储的值，自然不会改变原数组。
  打个比方：原数组是个抽屉，每个格子放的东西是数组元素。你这两种写法相当于把格子里的东西的信息抄了一份在自己手上（局部变量e），你在自己手上随便改抄来的内容，抽屉里的东西不会有任何变化。
• 传统下标for循环能生效，是因为你直接通过myArray[i]定位到了数组本身的存储位置，给这个位置赋值就是直接修改数组内部存储的内容，当然能得到预期结果。

很多人会搞混「修改引用类型的属性」和「给变量重新赋值」的区别：

如果数组元素本身是引用类型（比如对象、数组），你通过局部变量e修改这个对象的属性是可以生效的。因为这时候局部变量存的是对象的内存地址副本，和数组里存的地址指向同一个对象，修改对象属性本质是修改对象本身的内容；但如果你直接给e做整体重新赋值，就只是改变了局部变量的指向，和原数组、原对象就没有关联了。

举个直观的例子：

const testArr = [{ val: 1 }, { val: 2 }]
testArr.forEach(e => {
  e.val = 999 // 修改对象属性，会作用到原数组里的对象上
  e = { newVal: 0 } // 给局部变量重新赋值，和原数组无关
})
console.log(testArr) // 输出 [{val: 999}, {val: 999}]

如果不想用传统下标循环，也可以通过拿到遍历索引的方式修改原数组：
forEach写法：

const myArray = [null, null, null]
myArray.forEach((_, index, arr) => {
  arr[index] = {}
})
console.log(myArray) // [{}, {}, {}]

for...of写法，配合entries()拿索引：

const myArray = [null, null, null]
for (const [index] of myArray.entries()) {
  myArray[index] = {}
}
console.log(myArray) // [{}, {}, {}]

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