JavaScript对象展开

JavaScript对象展开（Object Spread）是ES2018引入的特性，允许通过简洁的语法复制或合并对象的可枚举属性。它是JavaScript中处理对象操作的重要工具，尤其适用于现代函数式编程和不可变数据模式。

概述[编辑 | 编辑源代码]

对象展开运算符（...）可将一个对象的属性“展开”到另一个对象中。其核心行为包括：

浅拷贝原对象的可枚举自有属性
同名属性会被后展开的对象覆盖
不复制原型链上的属性

基本语法：

  
const newObj = { ...originalObj };

基础用法[编辑 | 编辑源代码]

对象复制[编辑 | 编辑源代码]

创建原对象的浅拷贝：

  
const user = { name: "Alice", age: 25 };  
const userCopy = { ...user };  

console.log(userCopy); // 输出: { name: "Alice", age: 25 }

对象合并[编辑 | 编辑源代码]

合并多个对象时，后者属性覆盖前者：

  
const defaults = { theme: "light", fontSize: 16 };  
const preferences = { fontSize: 18, darkMode: true };  

const settings = { ...defaults, ...preferences };  
console.log(settings); // 输出: { theme: "light", fontSize: 18, darkMode: true }

与解构赋值结合[编辑 | 编辑源代码]

提取特定属性后展开剩余属性：

  
const { name, ...rest } = { name: "Bob", age: 30, role: "admin" };  
console.log(rest); // 输出: { age: 30, role: "admin" }

高级特性[编辑 | 编辑源代码]

嵌套对象展开[编辑 | 编辑源代码]

展开运算符仅执行浅拷贝，嵌套对象需特殊处理：

  
const original = { a: 1, nested: { b: 2 } };  
const shallowCopy = { ...original };  

shallowCopy.nested.b = 99;  
console.log(original.nested.b); // 输出: 99 （原对象被修改）

深度克隆解决方案：

  
const deepClone = JSON.parse(JSON.stringify(original));

计算属性名[编辑 | 编辑源代码]

与计算属性结合实现动态键名：

  
const key = "dynamicProp";  
const obj = { ...{ [key]: "value" } };  
console.log(obj); // 输出: { dynamicProp: "value" }

实际应用案例[编辑 | 编辑源代码]

React状态更新[编辑 | 编辑源代码]

在React中不可变更新状态：

  
this.setState(prevState => ({  
  userData: { ...prevState.userData, lastLogin: new Date() }  
}));

配置覆盖[编辑 | 编辑源代码]

合并默认配置与用户自定义配置：

  
function createConfig(custom) {  
  const defaults = { logLevel: "warn", apiUrl: "https://api.example.com" };  
  return { ...defaults, ...custom };  
}