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'
与深拷贝的关键区别
浅拷贝无法隔离嵌套层级的变更，而深拷贝会递归复制所有层级的引用值，确保完全独立。常见深拷贝方式包括：
立即学习“Java免费学习笔记（深入）”；
-
JSON.parse(JSON.stringify(obj))：简单场景可用，但不支持函数、undefined、Symbol、Date、RegExp 等 -
structuredClone()（现代浏览器）：支持多数内置类型，是较推荐的原生方案 - Lodash 的
_.cloneDeep()：兼容性好，功能全面
实际开发中的注意事项
使用扩展运算符拷贝对象时需明确数据结构深度：
- 仅含基本类型或确定无嵌套时，
{...obj}安全高效 - 存在多层对象/数组时，应评估是否需深拷贝，避免意外副作用
- 状态管理（如 React 的 state 更新）中，若 state 含嵌套结构，直接解构赋值后修改深层属性，可能引发难以排查的 bug
浅拷贝不是缺陷，而是设计使然。理解其边界，才能在性能与安全性之间做出合理取舍。
