当前位置： 技术文章>> JavaScript中的 Object.assign 和展开运算符 ... 有什么区别？
文章标题：JavaScript中的 Object.assign 和展开运算符 ... 有什么区别？
在JavaScript中，`Object.assign()` 和 展开运算符 (`...`) 都是用于对象合并的强大工具，它们在功能上有相似之处，但使用场景和具体行为上存在一些细微差别。了解这些差异有助于你更灵活地选择最适合你需求的工具。
### 1. 基本功能与用途
**Object.assign()** 方法用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象。它将返回目标对象。这个方法主要用于对象的合并与属性的复制。
```javascript
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
```
注意，`Object.assign()` 会直接修改目标对象。
**展开运算符 (`...`)** 则用于在函数调用、数组字面量以及对象字面量中，将数组或对象的元素/属性展开。在对象字面量中使用时，它允许你将一个对象的所有可枚举属性，复制到当前对象中。
```javascript
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const merged = { ...target, ...source };
console.log(merged); // { a: 1, b: 4, c: 5 }
console.log(target); // { a: 1, b: 2 }，target对象未被修改
```
与`Object.assign()`不同，使用展开运算符时，目标对象不会被修改，而是创建并返回了一个新对象。
### 2. 深层复制与浅层复制
无论是`Object.assign()`还是展开运算符，它们都是进行浅层复制（shallow copy）的。这意味着如果对象的属性值是另一个对象，那么复制的是对这个内部对象的引用，而不是对象本身。
```javascript
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
console.log(obj2.b === obj1.b); // true，指向同一个对象
// 使用Object.assign()也是同样的效果
const obj3 = Object.assign({}, obj1);
console.log(obj3.b === obj1.b); // true
```
若需要深层复制，即连内部对象也完全复制一份新的，则需要额外的逻辑或使用库（如lodash的`_.cloneDeep()`）来实现。
### 3. 返回值与原始对象的修改
如前所述，`Object.assign()`会修改目标对象，并返回修改后的目标对象。而展开运算符则是返回一个新的对象，不会修改原始对象。
这种差异在处理不希望修改原始对象，但需要基于原始对象生成新对象时尤其重要。例如，在Redux的reducer中，你通常会使用展开运算符来保持state的不可变性。
### 4. 性能考虑
在大多数情况下，两种方法的性能差异可以忽略不计。然而，在极端情况下（比如处理大型对象或频繁的对象合并操作），性能差异可能会变得显著。
- **Object.assign()** 底层是通过C++实现的，因此在处理大量属性时可能更加高效。
- **展开运算符** 提供了更灵活的语法，但在某些引擎中，其实现可能不如`Object.assign()`优化。
然而，具体性能差异还需根据实际使用场景和JavaScript引擎的实现来评估。
### 5. 使用场景与最佳实践
- **当你需要直接修改目标对象并返回修改后的对象时**，使用`Object.assign()`。
- **当你需要基于一个或多个对象创建一个新对象，同时保持原始对象不变时**，使用展开运算符。
- **在处理深层嵌套对象时**，考虑使用深层复制的方法或库，因为`Object.assign()`和展开运算符都是浅层复制。
- **在需要合并多个对象时**，两种方法都可以使用，但展开运算符的语法更加简洁易读。
### 6. 示例与进阶
假设你在开发一个应用，需要合并用户设置和默认设置。
```javascript
const defaults = {
theme: 'dark',
notifications: {
emails: true,
push: true
}
};
const userSettings = {
theme: 'light',
notifications: {
emails: false
}
};
// 使用Object.assign()
const settingsWithDefaults = Object.assign({}, defaults, userSettings);
console.log(settingsWithDefaults);
// { theme: 'light', notifications: { emails: false, push: true } }
// 注意：push设置被保留了，因为浅层复制
// 使用展开运算符
const settingsWithDefaultsSpread = { ...defaults, ...userSettings };
console.log(settingsWithDefaultsSpread);
// { theme: 'light', notifications: { emails: false } }
// 注意：push设置丢失了，因为浅层复制只复制了emails属性
// 对于深层嵌套对象，考虑使用深层复制的方法
// 例如，使用lodash的_.merge()
import _ from 'lodash';
const deepMergedSettings = _.merge({}, defaults, userSettings);
console.log(deepMergedSettings);
// { theme: 'light', notifications: { emails: false, push: true } }
```
### 7. 总结
在JavaScript中，`Object.assign()`和展开运算符（`...`）都是处理对象合并的有效工具。它们各有优缺点，选择哪个取决于你的具体需求，比如是否需要修改原始对象、是否关心性能、以及处理的是否是深层嵌套对象等。通过理解它们的差异和适用场景，你可以更加灵活和高效地使用它们来构建你的应用。
希望这篇文章能够帮助你更好地理解`Object.assign()`和展开运算符，并在实际开发中做出更合适的选择。如果你对JavaScript或前端技术有更多的疑问或想要深入了解，不妨访问我的网站“码小课”，那里有更多实用的教程和技巧等你来探索。