React 中的展开运算符(…) vs. Object.assign()：
在 React 开发中，我们经常需要处理对象和数组的复制与合并，尤其是在更新 state 或 props 时。遵循**不可变性（Immutability）**则是 React 的核心思想之一，这意味着我们不应该直接修改（mutate）数据，而是创建新的数据副本。展开运算符 (...) 和 Object.assign() 都是实现这一目标的重要工具。
下面我们将详细探讨这两者，并分析它们的区别。
一、 展开运算符 (Spread Operator)
展开运算符是 ES6 (ECMAScript 2015) 引入的语法，用三个点 (...) 表示。它的主要作用是将一个可迭代对象（如数组）或对象“展开”成其独立的元素或键值对。
1. 在对象中的使用
当用于对象时，展开运算符会创建一个新的对象，并将源对象的自有（own）可枚举（enumerable）属性复制到新对象中。
语法和示例：
// 原始对象
const user = {
id: 1,
name: 'Alice',
settings: {
theme: 'dark'
}
};
// 1. 复制对象
// 创建了一个 user 的浅拷贝
const userCopy = { ...user };
console.log(userCopy); // { id: 1, name: 'Alice', settings: { theme: 'dark' } }
console.log(userCopy === user); // false (是新对象)
console.log(userCopy.settings === user.settings); // true (是浅拷贝，嵌套对象引用相同)
// 2. 合并对象
const updates = {
name: 'Bob',
age: 30
};
// 后面的属性会覆盖前面的同名属性
const updatedUser = { ...user, ...updates };
console.log(updatedUser); // { id: 1, name: 'Bob', settings: { theme: 'dark' }, age: 30 }
2. 在数组中的使用
当用于数组时，它会将数组展开成独立的元素，非常适合用于创建新数组。
语法和示例：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 1. 复制数组
const arr1Copy = [...arr1];
console.log(arr1Copy); // [1, 2, 3]
console.log(arr1Copy === arr1); // false (是新数组)
// 2. 合并（连接）数组
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
// 3. 在数组中添加元素
const newArray = [0, ...arr1, 4];
console.log(newArray); // [0, 1, 2, 3, 4]
3. 在 React 中的典型应用
在 React 中，我们通常用它来更新组件的状态。
函数组件 (useState Hook):
import React, { useState } from 'react';
function UserProfile() {
const [user, setUser] = useState({ name: 'Alice', age: 25 });
const handleAgeIncrease = () => {
// 使用展开运算符创建新对象来更新 state
setUser(prevUser => ({
...prevUser,
age: prevUser.age + 1
}));
};
// ...
}
二、 Object.assign()
Object.assign() 是 ES5 就有的一个静态方法，用于将所有可枚举的自有属性从一个或多个源对象 (sources) 复制到目标对象 (target)。它会返回修改后的目标对象。
1. 语法
Object.assign(target, ...sources)
target: 目标对象，它将被修改并作为返回值。sources: 一个或多个源对象。
2. 关键行为：修改目标对象
Object.assign() 的一个核心特点是它会直接修改（mutate）第一个参数 target。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
const result = Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 2, c: 3 } (target 被修改了!)
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target === result); // true (返回的是对 target 的引用)
3. 如何实现不可变性
为了遵循 React 的不可变性原则，我们必须提供一个空对象 {} 作为 target，这样就不会修改任何现有的对象，而是创建一个全新的对象。
const user = { id: 1, name: 'Alice' };
const updates = { name: 'Bob', age: 30 };
// 提供一个空对象作为 target，实现不可变合并
const updatedUser = Object.assign({}, user, updates);
console.log(updatedUser); // { id: 1, name: 'Bob', age: 30 }
console.log(user); // { id: 1, name: 'Alice' } (原始 user 对象未被修改)
三、 核心区别对比
| 特性 | 展开运算符 (...) |
Object.assign() |
|---|---|---|
| 语法 | 运算符，语法更简洁、更具声明性。 | 函数调用，语法稍显冗长。 |
| 不可变性 | 总是返回一个新对象/数组，天然符合不可变性原则。 | 会修改第一个参数（target）。需要传入空对象{}作为target才能实现不可变。 |
| 可读性 | 通常被认为更现代、更易读。 | 对于不熟悉其修改target行为的开发者来说，可能会产生误解。 |
| 对数组的处理 | 非常自然和直观，用于复制、合并和添加元素。 | 对数组的处理不直观。它会将数组视为键为索引的对象进行合并，可能会产生非预期的结果。 |
| ECMAScript 版本 | ES6 (2015) | ES5 |
| 适用范围 | 可用于对象字面量、数组字面量和函数调用中。 | 只能作为函数调用。 |
数组处理的区别示例
这是一个 Object.assign() 处理数组时的陷阱：
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
// 使用 Object.assign 合并数组
const result = Object.assign([], arr1, arr2);
// 它会像这样工作:
// target = []
// source1: { '0': 1, '1': 2, '2': 3 } -> target becomes [1, 2, 3]
// source2: { '0': 4, '1': 5 } -> target becomes [4, 5, 3] (索引 0 和 1 被覆盖)
console.log(result); // [4, 5, 3] <-- 这通常不是我们想要的结果！
// 使用展开运算符，结果符合预期
const spreadResult = [...arr1, ...arr2];
console.log(spreadResult); // [1, 2, 3, 4, 5]
四、 结论与推荐
在现代 React 开发中（使用 Create React App 或其他现代构建工具），强烈推荐使用展开运算符 (...)。
为什么首选展开运算符 (...)？
- 更简洁、可读性更高：
const newUser = { ...user, name: 'New Name' };比const newUser = Object.assign({}, user, { name: 'New Name' });更直观。 - 更安全：它总是创建新对象/数组，从根本上避免了意外修改（mutation）的风险，完美契合 React 的不可变性理念。
- 对数组处理更友好：它是处理数组复制和合并的标准方式。
什么时候还可能使用 Object.assign() ？
- 兼容旧环境：如果你的项目需要支持不兼容 ES6 的旧版浏览器或环境，且没有使用 Babel 等转译工具，
Object.assign()是原生支持的选择。 - 特定 Polyfill 场景：在某些库或 Polyfill 中，可能会使用它。
总而言之，为了编写更清晰、更现代、更安全的 React 代码，请优先使用展开运算符 (...) 来处理对象和数组的不可变更新。