为何JavaScript的for of循环中数组元素修改无法持久化？

先把你的代码贴出来方便对照：

let iterable = [10, 20, 30];
for (let value of iterable) {
  value += 1;
  console.log(value); // 这里会输出11、21、31
}
for (let val of iterable) {
  console.log(val); // 但这里还是输出10、20、30
}

核心原因其实很简单：你在循环里拿到的value，只是原数组元素的一个「副本」，不是直接指向原数组里的元素本身。

具体拆解下：

• 数组里的10、20、30都是「原始类型值」（数字、字符串、布尔值都属于这类），当用for...of遍历的时候，每次循环都会把当前元素的数值复制一份给到变量value。就像你把文件复制了一份，改副本完全不会影响原文件。
• 你执行value += 1的时候，只是把这个副本变量的值加了1，原数组里的元素从头到尾都没被碰过。所以第一个循环里打印的是加过1的副本，原数组根本没变化。
• 第二个循环再遍历原数组，自然还是原来的数值。

那如果想真正修改原数组，有两种常用办法：

• 结合entries()拿到元素的索引，直接通过索引修改原数组：

  let iterable = [10, 20, 30];
  for (let [index, value] of iterable.entries()) {
    iterable[index] += 1; // 直接操作原数组的对应位置
    console.log(iterable[index]);
  }
  for (let val of iterable) {
    console.log(val); // 现在就会输出11、21、31啦
  }
  

• 如果不想修改原数组，而是生成一个新数组，可以用map()方法：

  let iterable = [10, 20, 30];
  const newIterable = iterable.map(num => num + 1);
  console.log(newIterable); // 输出 [11, 21, 31]
  

说白了就是：原始类型的值是按「值传递」的，你拿到的是副本，改副本不影响原数据；要改原数组就得直接操作它的索引位置～

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