JavaScript 中如何使用展开运算符实现对象的解构与克隆-js教程-PHP中文网

javascript中展开运算符（...）不能直接用于对象解构，但可用剩余属性语法（...rest）收集未解构属性，并通过{...obj}实现对象浅拷贝与合并。

javascript 中如何使用展开运算符实现对象的解构与克隆

JavaScript 中展开运算符（...）不能直接用于对象解构，但可以配合解构赋值和对象字面量实现“类解构”效果，并高效克隆对象。

对象解构本身不支持展开运算符

注意：展开运算符 ... 在解构语句左侧（即赋值目标）对对象无效。下面写法会报错：

❌ 错误示例：

const obj = { a: 1, b: 2, c: 3 };
const { ..., rest } = obj; // SyntaxError！

对象解构必须显式列出属性名或使用剩余属性（...）在右侧对象中收集未被解构的属性——且仅限于解构时的“剩余属性语法”，它与展开运算符同形但语义不同。

用剩余属性语法“模拟解构中的展开”

对象解构支持 ... 作为剩余属性操作符（只允许出现在解构模式末尾），用于收集未被单独声明的属性：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

它不是展开运算符，而是解构特有的剩余语法
必须放在解构大括号内最后位置
结果是一个新对象，包含所有未被显式解构的属性

✅ 正确示例：

const obj = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = obj;
console.log(a);   // 1
console.log(b);   // 2
console.log(rest); // { c: 3, d: 4 }

用展开运算符克隆对象（浅拷贝）

展开运算符在对象字面量右侧（即表达式位置）可展开一个可枚举对象，生成新对象，实现浅拷贝：

只复制自身可枚举属性（不含原型链上的属性）
嵌套对象仍为引用，修改嵌套属性会影响原对象
忽略 Symbol 属性（除非用 Object.getOwnPropertyDescriptors() 配合 Object.defineProperties()）

✅ 基础克隆：

const original = { x: 1, y: { z: 2 } };
const clone = { ...original };
clone.x = 99;
console.log(original.x); // 1（未变）
console.log(clone.y === original.y); // true（共享引用）

合并对象与优先级控制

展开运算符天然支持对象合并，后展开的对象属性会覆盖先展开的同名属性：

const defaults = { theme: 'light', fontSize: 14 };
const userPrefs = { fontSize: 16, lang: 'zh' };
const config = { ...defaults, ...userPrefs };
console.log(config); // { theme: 'light', fontSize: 16, lang: 'zh' }

这个特性常用于配置合并、默认值填充等场景，比 Object.assign() 更简洁直观。