JavaScript扩展运算符克隆数组修改B元素致A同步变更问题

你的概念误区在于：扩展运算符...实现的是数组的浅克隆，而非深克隆，两种数组场景的表现差异来自JavaScript不同数据类型的存储机制差异：

• 对于存储基础类型（数字、字符串、布尔值、null、undefined、Symbol、BigInt）的数组：数组的每一项直接存储的是值本身。浅克隆时会把这些值复制一份存入新数组，新旧数组的元素完全独立，因此修改新数组的元素不会影响原数组。
• 对于存储引用类型（对象、数组、函数等）的数组：数组的每一项存储的不是数据本身，而是指向堆内存中实际数据的引用地址。浅克隆时只会复制这个引用地址，不会复制引用指向的实际对象。也就是说执行B = [...A]后，数组B和数组A的对应位置存的是同一个内存地址，指向堆里的同一个对象。

注意区分两种操作的本质：
执行B[0] = 新值是修改数组B自身存储的内容，这种操作不会影响数组A；
执行B[0].value = 4时，并没有修改数组B存储的引用地址，只是顺着B[0]存的地址找到堆内存里的公共对象，修改了对象的属性，因此所有指向这个对象的引用（包括A[0]）读取到的属性值都会同步变化。

如果需要让对象数组克隆后完全独立、修改互不影响，需要做深克隆，常用方案有两类：

• 普通可序列化场景（对象无函数、Symbol、循环引用）：使用JSON序列化反序列化实现

const A = [{id:1, value:3},{id:2, value:1}];
const B = JSON.parse(JSON.stringify(A));
B[0].value = 4;
console.log(A[0].value); // 输出3，不受修改影响

• 复杂场景（存在循环引用、特殊类型对象）：使用原生提供的structuredClone()方法，或自行实现递归深克隆逻辑

const A = [{id:1, value:3},{id:2, value:1}];
const B = structuredClone(A);
B[0].value = 4;
console.log(A[0].value); // 输出3，不受修改影响

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