了解 lodash 中的差异:extend() / assign()、merge() 和 mergeWith()

简介

Lodash 是一个非常流行的 JavaScript 工具库,提供了许多实用的函数和方法,可以帮助我们更高效地编写 JavaScript 代码。在 Lodash 中,有几个方法看起来似乎很相似,但实际上它们之间存在一些重要的差异。这篇文章将会深入探讨 extend() / assign()、merge() 和 mergeWith() 这三个方法的使用场景及其差异。

extend() 和 assign()

首先,我们来看一下 extend() 和 assign() 方法。这两个方法都可以用来将一个或多个对象合并成一个新对象。

extend()

extend() 方法可以接受多个参数,每个参数都是对象。它会将第二个参数开始的所有对象的属性复制到第一个对象中,并返回合并后的对象。如果有相同的属性,则后面的属性会覆盖前面的属性。

---------------- ----------

示例代码:

----- ------ - - -- - --
----- ----- - - -- - --
 
---------------- -------
-- -- - ---- -- ---- - -

assign()

assign() 方法也可以接受多个参数,每个参数都是对象。它会将第二个参数开始的所有对象的属性复制到第一个对象中,并返回合并后的对象。与 extend() 不同的是,如果有相同的属性,则后面的属性不会覆盖前面的属性。

---------------- ----------

示例代码:

----- ------ - - -- - --
----- ----- - - -- -- -- - --
 
---------------- -------
-- -- - ---- -- ---- - -

两者区别

可以看出,extend() 和 assign() 的主要区别在于它们如何处理重复的属性。extend() 会覆盖前面的属性,而 assign() 不会。

merge() 和 mergeWith()

接下来我们再来看一下 merge() 和 mergeWith() 方法。这两个方法也可以用来将一个或多个对象合并成一个新对象,但与 extend() 和 assign() 不同的是,它们可以递归地合并嵌套的对象。

merge()

merge() 方法可以接受多个参数,每个参数都是对象。它会递归地将第二个参数开始的所有对象的属性合并到第一个对象中,并返回合并后的对象。如果有相同的属性,则后面的属性会覆盖前面的属性。

--------------- ----------

示例代码:

----- ------ - -
  -- -
    - -- - --
    - -- - -
  -
--
----- ----- - -
  -- -
    - -- - --
    - -- - -
  -
--
 
--------------- -------
-- -- -
--   -- -
--     - -- -- -- - --
--     - -- -- -- - -
--   -
-- -

mergeWith()

mergeWith() 方法也可以接受多个参数,每个参数都是对象。它会递归地将第二个参数开始的所有对象的属性合并到第一个对象中,并返回合并后的对象。与 merge() 不同的是,如果有相同的属性,则会调用一个自定义的合并函数来决定如何合并这些属性。

------------------- -------- -----------

示例代码:

----- ------ - -
  -- -
    - -- - --
    - -- - -
  -
--
----- ----- - -
  -- -
    - -- - --
    - -- - -
  -
--
 
-------- -------------------- --------- -
  -- --------------------- -
    ------ --------------------------
  -
-
 
------------------- ------

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------