Lodash 对象合并函数详解：.merge()、.extend()、.assign() 的区别与应用

2024-03-19 02:37:59

深度了解 Lodash 中的对象合并函数：.merge()、.extend() 和 .assign()

引言

在 JavaScript 开发中，合并对象是一项常见任务。Lodash 提供了一系列函数来简化这一过程，其中包括 .merge(), .extend() 和 .assign()。虽然这些函数看起来用途相似，但它们在行为和用途上存在着一些关键差异。

.assign() 函数

.assign() 函数用于将一个或多个源对象中的可枚举属性复制到目标对象。如果目标对象中已经存在同名属性，则会被覆盖。该函数不会进行深度合并，这意味着嵌套对象或数组将被简单地复制，而不是合并。

语法：

_.assign(target, ...sources)

.extend() 函数

.extend() 函数与 .assign() 函数类似，但它还支持深度合并。这意味着，如果源对象或目标对象中的属性本身是一个对象或数组，则 .extend() 函数将递归地合并它们的属性。

语法：

_.extend(target, ...sources)

.merge() 函数

.merge() 函数是 Lodash 中最灵活和强大的合并函数。它不仅支持深度合并，还支持合并数组。当合并数组时，.merge() 函数会创建目标数组中不存在的新元素，并覆盖已存在的元素。

语法：

_.merge(target, ...sources)

关键差异

下表总结了 .merge(), .extend() 和 .assign() 函数之间的关键差异：

特征	`.assign()`	`.extend()`	`.merge()`
深度合并	否	是	是
数组合并	否	否	是
性能	最快	中等	最慢

使用场景

根据你想要实现的行为，选择合适的合并函数非常重要：

浅层合并： 使用 .assign() 函数。
深度合并对象： 使用 .extend() 函数。
深度合并对象和数组： 使用 .merge() 函数。

实例

以下是使用这三个函数合并对象的示例：

// 使用 .assign() 进行浅层合并
const target = {a: 1, b: 2};
const source = {c: 3, d: 4};
_.assign(target, source);
// 输出：{a: 1, b: 2, c: 3, d: 4}

// 使用 .extend() 进行深度合并
const target = {a: {b: 1}, c: 2};
const source = {a: {b: 2}, d: 4};
_.extend(target, source);
// 输出：{a: {b: 2}, c: 2, d: 4}

// 使用 .merge() 进行深度合并和数组合并
const target = {a: [1, 2], b: 2};
const source = {a: [3, 4], c: 4};
_.merge(target, source);
// 输出：{a: [1, 2, 3, 4], b: 2, c: 4}