Lodash-extend（）/.assign（）和.merge（）之间的差异

Question

在Lodash库中，是否有人可以更好地解释合并和扩展/分配。

这是一个简单的问题，但我还是没有回答。

Answer 1

另一个需要注意的区别是处理未定义的值：

mergeInto = { a: 1}
toMerge = {a : undefined, b:undefined}
lodash.extend({}, mergeInto, toMerge) // => {a: undefined, b:undefined}
lodash.merge({}, mergeInto, toMerge)  // => {a: 1, b:undefined}

因此，合并不会将未定义的值合并为定义的值。

Answer 2

• _合并（对象，[源代码]，[定制器]，[thisArg]）
• _。
• _扩展（对象，[源代码]，[定制器]，[thisArg]）
• _默认（对象，[源]）
• _。

• 它们中没有一个能像您预期的那样在阵列上工作

• .defaults和.defaultsDeep以与其他参数相反的顺序处理参数（尽管第一个参数仍然是目标对象）

_.assign      ({}, { a: 'a' }, { a: 'bb' }) // => { a: "bb" }
_.merge       ({}, { a: 'a' }, { a: 'bb' }) // => { a: "bb" }
_.defaults    ({}, { a: 'a' }, { a: 'bb' }) // => { a: "a"  }
_.defaultsDeep({}, { a: 'a' }, { a: 'bb' }) // => { a: "a"  }

_.assign      ({}, { a: 'a'  }, { a: undefined }) // => { a: undefined }
_.merge       ({}, { a: 'a'  }, { a: undefined }) // => { a: "a" }
_.defaults    ({}, { a: undefined }, { a: 'bb' }) // => { a: "bb" }
_.defaultsDeep({}, { a: undefined }, { a: 'bb' }) // => { a: "bb" }

_.assign      ({}, { a: 'a'  }, { a: null }) // => { a: null }
_.merge       ({}, { a: 'a'  }, { a: null }) // => { a: null }
_.defaults    ({}, { a: null }, { a: 'bb' }) // => { a: null }
_.defaultsDeep({}, { a: null }, { a: 'bb' }) // => { a: null }

_.assign      ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "b": "bb" }}
_.merge       ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a", "b": "bb" }}
_.defaults    ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a" }}
_.defaultsDeep({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a", "b": "bb" }}

_.assign      ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "bb" ] }
_.merge       ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "bb" ] }
_.defaults    ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "a"  ] }
_.defaultsDeep({}, {a:['a']}, {a:['bb']}) // => { "a": [ "a"  ] }

a={a:'a'}; _.assign      (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.merge       (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.defaults    (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.defaultsDeep(a, {b:'bb'}); // a => { a: "a", b: "bb" }

注意：正如@Mistic所指出的，Lodash将数组视为对象，其中键是数组的索引。

_.assign      ([], ['a'], ['bb']) // => [ "bb" ]
_.merge       ([], ['a'], ['bb']) // => [ "bb" ]
_.defaults    ([], ['a'], ['bb']) // => [ "a"  ]
_.defaultsDeep([], ['a'], ['bb']) // => [ "a"  ]

_.assign      ([], ['a','b'], ['bb']) // => [ "bb", "b" ]
_.merge       ([], ['a','b'], ['bb']) // => [ "bb", "b" ]
_.defaults    ([], ['a','b'], ['bb']) // => [ "a", "b"  ]
_.defaultsDeep([], ['a','b'], ['bb']) // => [ "a", "b"  ]

Answer 3

以下是extend/assign的工作原理：对于源中的每个属性，按原样将其值复制到目标。如果属性值本身是对象，则不会对其属性进行递归遍历。整个对象将从源获取并设置到目标。

以下是merge的工作原理：对于源代码中的每个属性，检查该属性是否为对象本身。如果是，则递归地向下，并尝试将子对象属性从源映射到目标。因此，本质上我们将对象层次结构从源合并到目标。而对于扩展/分配，它是从源到目标的简单的一级属性副本。

下面是一个简单的JSBin，它将使这一点非常清楚：http://jsbin.com/uXaqIMa/2/edit?js安慰

这里有更详细的版本，在示例中也包括数组：http://jsbin.com/uXaqIMa/1/edit?js，控制台