JS使用forEach遍历对象数组时控制台打印结果不符合预期问题

核心原因 #

这个现象和JS循环运行逻辑无关，是控制台的打印机制+引用类型的存储特性共同导致的：

1. 你遍历的数组元素是对象，属于JS的引用类型，forEach回调参数里的el是数组中对应对象的引用，修改el.value确实会同步修改原数组内的对象，循环执行过程中数组的状态确实是逐次更新的，你的逻辑本身没有问题。
2. 主流浏览器和Node.js的console.log对引用类型采用懒求值的打印策略：调用console.log(array)时，控制台不会立即把数组的当前完整状态做快照存储，只会存储数组的内存引用。由于forEach是同步执行任务，会在主线程一次性执行完成，四次console.log调用触发时，数组已经被修改为所有元素value为1的最终状态，你在控制台展开任何一次打印结果，读取的都是最终的内存值，所以四次输出看起来完全一致。

你遗漏的相关知识点 #

• JS引用类型的存储逻辑：对象、数组等引用类型的变量存储的是内存地址，而非实际值，传递、打印时默认传递的都是地址引用，不会自动复制值。
• 控制台打印的懒加载机制：控制台不会为引用类型的打印自动做快照，需要手动序列化才能捕获调用log瞬间的状态。

验证方法 #

如果要打印逐次更新的真实状态，可以在打印时对数组做深拷贝，生成调用log瞬间的快照，两种常用实现方式：

1. 利用JSON序列化反序列化生成快照：

const array = [{value: 0}, {value: 0}, {value: 0}, {value: 0}];
array.forEach(el => {
    el.value = 1;
    console.log(JSON.parse(JSON.stringify(array)))
})

2. 浅拷贝每个元素对象生成新数组（仅适用于单层对象场景）：

const array = [{value: 0}, {value: 0}, {value: 0}, {value: 0}];
array.forEach(el => {
    el.value = 1;
    console.log(array.map(item => ({...item})))
})

两种方式都能得到你预期的逐次更新的输出结果。

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