对象展开运算符 ... 详解

1. 基本概念

对象展开运算符（Spread Operator）... 是 ES6 中引入的重要特性，用于展开对象的可枚举属性。

2. 基本语法

javascript 复制代码

const newObj = { ...originalObj };

3. 主要用途

3.1 对象浅拷贝

javascript 复制代码

const person = { name: 'Alice', age: 25 };
const copy = { ...person };

console.log(copy); // { name: 'Alice', age: 25 }
console.log(copy === person); // false (不同引用)

3.2 合并对象

javascript 复制代码

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

3.3 属性覆盖

javascript 复制代码

const defaults = { theme: 'light', fontSize: 16 };
const userSettings = { fontSize: 18, language: 'en' };

const finalSettings = { ...defaults, ...userSettings };
console.log(finalSettings); // { theme: 'light', fontSize: 18, language: 'en' }

3.4 添加新属性

javascript

ini 复制代码

const base = { x: 1, y: 2 };
const extended = { ...base, z: 3, color: 'red' };

console.log(extended); // { x: 1, y: 2, z: 3, color: 'red' }

4. 深度特性

4.1 展开顺序的重要性

javascript 复制代码

const objA = { prop: 'A' };
const objB = { prop: 'B' };

const result1 = { ...objA, ...objB }; // { prop: 'B' }
const result2 = { ...objB, ...objA }; // { prop: 'A' }

4.2 与解构赋值结合 ========》

javascript 复制代码

const user = { id: 1, name: 'John', age: 30, email: 'john@example.com' };

// 提取特定属性，剩余属性放入rest对象
const { id, name, ...rest } = user;

console.log(id);   // 1
console.log(name); // John
console.log(rest); // { age: 30, email: 'john@example.com' }

4.3 条件展开

javascript 复制代码

const condition = true;
const extraProps = condition ? { admin: true, role: 'editor' } : {};

const user = {
  name: 'Alice',
  ...extraProps
};

console.log(user); // { name: 'Alice', admin: true, role: 'editor' }

5. 实际应用场景

5.1 React 状态更新

javascript 复制代码

// 不可变状态更新
this.setState(prevState => ({
  ...prevState,
  count: prevState.count + 1
}));

5.2 函数参数处理

javascript 复制代码

function processUser(baseInfo, additionalInfo) {
  return {
    ...baseInfo,
    ...additionalInfo,
    processed: true,
    timestamp: Date.now()
  };
}

const user = processUser(
  { name: 'Bob', age: 25 },
  { email: 'bob@example.com' }
);

5.3 配置合并

javascript 复制代码

const defaultConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

const userConfig = {
  timeout: 10000,
  apiKey: '12345'
};

const finalConfig = {
  ...defaultConfig,
  ...userConfig
};

6. 注意事项

6.1 浅拷贝问题

javascript 复制代码

const original = {
  name: 'Test',
  nested: { value: 1 }
};

const copy = { ...original };
copy.nested.value = 2;

console.log(original.nested.value); // 2 (被修改了!)

6.2 原型链属性

javascript 复制代码

class Animal {
  constructor() {
    this.type = 'animal';
  }
}

Animal.prototype.speak = function() { return 'sound'; };

const dog = new Animal();
dog.breed = 'Labrador';

const copy = { ...dog };
console.log(copy.type);    // 'animal'
console.log(copy.breed);   // 'Labrador'
console.log(copy.speak);   // undefined (原型方法不会被复制)

6.3 不可枚举属性

javascript 复制代码

const obj = {};
Object.defineProperty(obj, 'hidden', {
  value: 'secret',
  enumerable: false
});

obj.visible = 'can see';

const spread = { ...obj };
console.log(spread); // { visible: 'can see' }

7. 与数组展开的区别

javascript 复制代码

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 数组转为对象
const array = ['a', 'b', 'c'];
const objectFromArray = { ...array }; // { 0: 'a', 1: 'b', 2: 'c' }

8. 浏览器兼容性

对象展开运算符在现代浏览器中得到良好支持，但在旧版浏览器中可能需要使用 Babel 等工具进行转译。

总结

对象展开运算符 ... 是一个强大且灵活的工具，它：

提供简洁的对象复制和合并语法
支持不可变数据模式
提高代码的可读性和可维护性
在处理配置、状态管理等场景中特别有用

使用时需要注意其浅拷贝的特性，对于嵌套对象需要额外的深拷贝处理。