对象扩展符浅拷贝实验详解

JavaScript中对象扩展运算符（{...obj}）看似便捷的拷贝方式实则仅执行浅拷贝——它安全复制基本类型属性，却对嵌套的对象、数组等引用类型只共享内存地址，导致修改深层数据时新旧对象相互污染；本文通过直观实验代码揭示这一易被忽视的关键行为，并对比深拷贝方案与实际开发中的风险场景，帮你避开状态管理中的“隐形陷阱”，在性能与数据隔离之间做出清醒选择。

JavaScript中对象扩展运算符（{...obj}）执行的是浅拷贝，它只复制对象第一层属性的值，对嵌套对象或数组等引用类型，仅复制其内存地址，而非创建新副本。

扩展运算符如何进行浅拷贝

当使用 {...obj} 时，JavaScript 会遍历原对象自身可枚举属性（不含原型链），将每个键值对“按值”复制到新对象中。但这里的“值”对基本类型（如字符串、数字、布尔）是真实复制，对引用类型（如对象、数组、函数）只是复制引用。

• 基本类型属性：独立存在，修改新对象不影响原对象
• 引用类型属性：新旧对象共享同一堆内存，修改嵌套内容会相互影响

典型实验验证代码示例

以下代码可直观验证浅拷贝行为：

const original = {
  name: 'Alice',
  hobbies: ['reading', 'coding'],
  address: { city: 'Beijing' }
};

const copied = { ...original };

// 修改基本类型 → 不影响原对象
copied.name = 'Bob';
console.log(original.name); // 'Alice'

// 修改嵌套数组元素 → 影响原对象
copied.hobbies.push('gaming');
console.log(original.hobbies); // ['reading', 'coding', 'gaming']

// 修改嵌套对象属性 → 影响原对象
copied.address.city = 'Shanghai';
console.log(original.address.city); // 'Shanghai'

与深拷贝的关键区别

浅拷贝无法隔离嵌套层级的变更，而深拷贝会递归复制所有层级的引用值，确保完全独立。常见深拷贝方式包括：

• JSON.parse(JSON.stringify(obj))：简单场景可用，但不支持函数、undefined、Symbol、Date、RegExp 等
• structuredClone()（现代浏览器）：支持多数内置类型，是较推荐的原生方案
• Lodash 的 _.cloneDeep()：兼容性好，功能全面

实际开发中的注意事项

使用扩展运算符拷贝对象时需明确数据结构深度：

• 仅含基本类型或确定无嵌套时，{...obj} 安全高效
• 存在多层对象/数组时，应评估是否需深拷贝，避免意外副作用
• 状态管理（如 React 的 state 更新）中，若 state 含嵌套结构，直接解构赋值后修改深层属性，可能引发难以排查的 bug

浅拷贝不是缺陷，而是设计使然。理解其边界，才能在性能与安全性之间做出合理取舍。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《对象扩展符浅拷贝实验详解》文章吧，也可关注golang学习网公众号了解相关技术文章。