简介
看别人的代码过程中经常看到assign
,extend
,merge
这些非常相似的函数,它们都是合并对象的属性到目标对象中,那么它们到底有什么区别呢?
我们先看这几个单词本身的意思(ps:使用必应词典):
-
assign
v. 指定,指派,转让,分派
n. 【法】受让人
Web. 分配,赋值,委派
-
extend (看起来像 JS 中的关键字
extends
)v. 扩展,延长,扩大,提供
Web. 延伸,扩展,伸展
-
merge
v. 结合,融入,相融,渐渐消失在某物之中
Web. 合并,融合,归并
函数详解
1. <span id="1.1">_.assign(object[,...sources])
</span>
Assigns own enumerable string keyed properties of source objects to the destination object. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.
<small style="text-align:center;display:block;">官方文档中对 assign 的解释</small>
意思如下:
从source
对象上分配可枚举属性到目标对象object
,source
对象的应用规则是从左往右,靠后的属性会覆盖前面的属性。
例子如下:
function Foo() {
this.a = 1;
}
function Bar() {
this.c = 3;
}
Foo.prototype.b = 2;
Bar.prototype.d = 4;
_.assign({ a: 0 }, new Foo(), new Bar()); // => {"a":1,"c":3}
2. <span id="1.2">_.extend(object[,...sources])
</span>
实际上这是_.assignIn(object[,...sources])
的别名,这个方法类似 assign
This method is like _.assign except that it iterates over own and inherited source properties.
<small style="text-align:center;display:block;">官方文档对 assignIn 的解释</small>
意思如下:
这个方面类似_.assgin()
,但是它会合并在原型链上的属性
例子如下:
function Foo() {
this.a = 1;
}
function Bar() {
this.c = 3;
}
Foo.prototype.b = 2;
Bar.prototype.d = 4;
_.assignIn({ a: 0 }, new Foo(), new Bar());
/* =>
{
a: 1,
b: 2,
c: 3,
d: 4
};
*/
3. <span id="1.3">_.merge(object[,...sources])
</span>
This method is like _.assign except that it recursively merges own and inherited enumerable string keyed properties of source objects into the destination object. Source properties that resolve to undefined are skipped if a destination value exists. Array and plain object properties are merged recursively.Other objects and value types are overridden by assignment. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.
<small style="text-align:center;display:block;">官方文档对 merge 的解释</small>
意思如下:
该方法类似_.assign, 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在,被解析为 undefined 的 sources 来源对象属性将被跳过。数组和普通对象会递归合并,其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。
例子如下:
var object = {
a: [{ b: 2 }, { d: 4 }]
};
var other = {
a: [{ c: 3 }, { e: 5 }]
};
_.merge(object, other);
/* =>
{
a: [
{ b: 2, c: 3 },
{ d: 4, e: 5 }
]
};
*/
总结
Lodash 工具库提供了多个对象合并的方法来满足不同的需求,assign合并对象本身的属性,assignIn在此基础上还会合并原型链上的属性,merge会对属性值为对象的属性进行递归。