Node.js中修改slice返回的子数组为何会同步更新原数组？

你遇到的现象是slice方法的浅拷贝规则导致的：

• JavaScript数据类型分为两类：基本类型（数值、字符串、布尔值等）存储的是实际值，引用类型（对象、数组等）存储的是指向内存中实际数据的地址指针。
• slice方法执行的是浅拷贝操作：它生成的新数组会把原数组的元素逐一复制到新数组中。如果元素是基本类型，就复制对应的值，新旧数组的该元素完全独立；如果是引用类型，只会复制它的内存地址，不会复制地址指向的实际对象，新旧数组的对应元素会指向同一个对象。

你的示例中原数组a的所有元素都是对象（引用类型），所以slice得到的b数组的前两个元素和a的前两个元素指向的是完全相同的对象，你在循环中修改对象的属性，自然会同步反映到两个数组中。

验证示例 #

如果数组元素是基本类型，slice的修改不会影响原数组：

const numArr = [1, 2, 3]
const subArr = numArr.slice(0, 2)
subArr[0] = 99
console.log(numArr) // 输出 [1, 2, 3]，原数组不受影响
console.log(subArr) // 输出 [99, 2]

解决方案 #

如果你希望修改子数组的元素不影响原数组，需要对引用类型元素做深拷贝：

const a = [{ x: 1 }, { x: 3 }, { x: 4 }];
// 对slice返回的子数组元素做深拷贝
const b = a.slice(0, 2).map(item => structuredClone(item));

for (let input of b) {
  input.y = 1;
}

console.log(b); // 元素携带y属性
console.log(a); // 原数组元素不变，不受修改影响

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