为何JavaScript更新三维数组时会重置已有行的值？

问题根源 #

你的代码存在数组引用复用和索引逻辑混乱的问题，同时控制台的惰性求值特性也误导了对问题的判断。

具体错误分析 #

1. 索引逻辑错误：你复制的是state.map[batchIndex][newX]（第newX行），却修改这个拷贝的newX位置，完全偏离了“更新指定行指定列”的目标。
2. 浅拷贝导致引用共享：state.map[batchIndex] = [...state.map[batchIndex]]是浅拷贝，子数组仍和原数组共享引用，后续修改会意外影响旧数据。
3. 控制台惰性求值：第一次打印的“正确值”其实是控制台的快照，当后续修改共享引用的子数组后，控制台里的旧对象会同步变化，看起来像是第二次打印时数据被重置。

修正后的代码 #

const batchIndex = Math.floor(x / 30);
const targetRow = z; // 要更新的行索引
const targetCol = x % 30; // 要更新的列索引

// 深度拷贝当前批次的所有行，彻底切断引用
const updatedBatch = state.map[batchIndex].map(row => [...row]);

// 直接修改目标行的目标列
updatedBatch[targetRow][targetCol] = thing;

// 将修改后的批次替换回原数组
state.map[batchIndex] = updatedBatch;

// 现在打印会得到正确结果
console.log(state.map[batchIndex]);

关键说明 #

• 用map(row => [...row])对批次内的每一行做浅拷贝，实现对二维子数组的深度拷贝，避免后续修改影响旧数据。
• 明确区分行索引和列索引，直接定位到目标位置修改，避免不必要的中间数组操作。
• 彻底替换整个批次数组，确保state中的数据是全新的引用，不会和旧数据共享内存。

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