合并 JavaScript 对象的全面指南252

在 JavaScript 开发中，经常需要合并多个对象以创建新的对象。这可以通过多种方式实现，每种方式都有其独特的优点和缺点。在这篇文章中，我们将探讨 JavaScript 中合并对象的各种方法，并深入了解每种方法的细微差别。

()

() 方法是合并 JavaScript 对象最常用的方法。它具有以下优点：* 简单易用：只需一个函数调用即可合并多个对象。
* 浅层合并：只合并源对象的顶层属性。

以下是如何使用 () 合并对象：```
const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const mergedObj = ({}, obj1, obj2);
```

```mergedObj``` 将包含 `name` 和 `age` 属性，如下所示：```
{ name: 'John', age: 30 }
```

展开运算符（...）

展开运算符 (...) 是另一种合并 JavaScript 对象的方法。它具有以下优点：* 紧凑语法：可以用一行代码合并多个对象。
* 浅层合并：仅合并源对象的顶层属性。

以下是如何使用展开运算符合并对象：```
const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const mergedObj = { ...obj1, ...obj2 };
```

```mergedObj``` 将包含 `name` 和 `age` 属性，如下所示：```
{ name: 'John', age: 30 }
```

Lodash 的 merge() 方法

Lodash 库提供了一个名为 `merge()` 的函数，用于合并 JavaScript 对象。它具有以下优点：* 深层合并：合并源对象的嵌套属性。
* 自定义合并策略：允许指定如何合并特定属性。

以下是如何使用 Lodash 的 `merge()` 方法合并对象：```
const obj1 = { name: 'John', address: { street: 'Main St' } };
const obj2 = { age: 30, address: { city: 'New York' } };
const mergedObj = (obj1, obj2);
```

```mergedObj``` 将包含 `name`、`age` 和 `address` 属性，其中 `address` 属性已合并，如下所示：```
{ name: 'John', age: 30, address: { street: 'Main St', city: 'New York' } }
```

ES6 中的 ()

ES6 中的 () 方法可用于创建新对象，该对象从现有对象继承属性。它具有以下优点：* 创建新的对象：合并过程不会修改现有对象。
* 原型继承：新对象继承了原始对象的原型。

以下是如何使用 () 合并对象：```
const obj1 = { name: 'John' };
const obj2 = (obj1, { age: { value: 30 } });
```

```obj2``` 将包含 `name` 和 `age` 属性，同时从 `obj1` 继承原型，如下所示：```
{ name: 'John', age: 30 }
```

合并 JavaScript 对象的方式有多种。最合适的方法取决于您的具体需求。

对于简单的浅层合并，() 或展开运算符 (...) 是不错的选择。

对于深层合并或具有自定义合并逻辑，Lodash 的 merge() 方法更适合。

如果需要创建具有原型继承的新对象，() 是可行的选择。

2025-01-19

上一篇：JavaScript 字体设置：提升网络文本的视觉体验

下一篇：禁用 JavaScript 带来的影响以及应对策略