展开运算符(...)在javascript中实现对象的浅拷贝,仅复制可枚举自身属性,不处理嵌套对象的深层结构;修改嵌套内容会影响原对象,需结合其他方法实现深拷贝。

展开运算符(...)在 JavaScript 中可用于对象的浅拷贝,它将源对象的可枚举自身属性复制到新对象中,不处理嵌套对象的深层结构。
基础浅拷贝:单层属性直接复制
当对象只含原始值(如字符串、数字、布尔值)或顶层引用类型(如 Date、RegExp)时,展开运算符能可靠创建独立的新对象,修改新对象不会影响原对象。
-
✅ 正确示例:
const original = { a: 1, b: 'hello', c: true };const copy = { ...original };copy.a = 99;console.log(original.a); // 1(未变) -
⚠ 注意:若原对象含函数、Symbol 键或不可枚举属性,这些不会被拷贝(因为
...只遍历可枚举自身属性)。
嵌套对象仍共享引用:浅拷贝的本质限制
展开运算符只拷贝第一层属性,内部嵌套的对象/数组仍为同一引用。修改嵌套内容会影响原对象。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
❌ 常见误区:
const original = { user: { name: 'Alice', age: 30 } };const copy = { ...original };copy.user.name = 'Bob';console.log(original.user.name); // 'Bob'(被意外修改) -
? 解决思路:对嵌套对象单独展开,或结合其他方法(如
JSON.parse(JSON.stringify())或结构化克隆)实现深拷贝——但需注意兼容性和特殊值限制。
合并多个对象:拷贝 + 扩展的典型用法
展开运算符常用于组合配置、默认值覆盖等场景,天然支持多对象合并,后出现的同名属性会覆盖前面的。
-
✅ 实际应用:
const defaults = { theme: 'light', fontSize: 14 };const userPrefs = { fontSize: 16 };const config = { ...defaults, ...userPrefs };// { theme: 'light', fontSize: 16 } -
? 提示:顺序决定优先级;若需更灵活的合并逻辑(如深度合并),应使用专用工具库(如 Lodash 的
merge)。
与解构赋值配合:提取+拷贝一步到位
可先解构出需要的属性,再用展开运算符收集剩余部分,兼顾筛选与拷贝。
-
✅ 示例:
const data = { id: 101, name: 'Product A', price: 29.99, category: 'tools' };const { id, ...rest } = data;const safeCopy = { ...rest }; // 排除 id 的副本 - ? 场景价值:适合 API 响应清洗、表单数据预处理等需剔除敏感字段或临时标识的场合。
不复杂但容易忽略细节:展开运算符是浅拷贝,适用范围明确,关键在于理解“浅”的边界——它只切断最外层引用链。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










