Lodash 中 assign，extend 和 merge 的区分

简介

我们经常在他人的代码中看见 assign，extend，merge 函数，这三个函数用起来很相似，都是兼并源对象的属性到目的对象中。

既然都是兼并对象，为何还分三个差别的函数呢？它们之间到底有什么区分呢？

assign(object, [sources])

我们先看看官方网站上面的定义：

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.

把源对象(sources)的属性分配到目的对象(object)，源对象会从左往右地挪用，背面对象的属性会掩盖前面的。

看看下面的例子:

assign({}, { a: 1 }, { b: 2 });
// { a: 1, b: 2 }

// 背面的 { a: 2 } 把前面的 { a: 1 } 掩盖了
assign({}, { a: 1 }, { b: 2 }, { a: 2 });
// { a: 2, b: 2 }

// 视察下面两个例子，假如属性值为 object，背面的值会掩盖前面的值
assign(
  {},
  { a: 1 },
  { b: { c: 2, d: 3 } }
)
// { a: 1, b: { c: 2, d: 3 } }

assign(
  {},
  { a: 1 },
  { b: { c: 2, d: 3 } },
  { b: { e: 4 } }
)
// { a: 1, b: { e: 4 } }

// `assign` 函数会疏忽原型链上的属性。
function Foo() { this.c = 3; }
Foo.prototype.d = 4;
assign({ a: 1 }, new Foo());
// { a: 1, c: 3 }

// `assign` 会修正本来的对象
var test = { a: 1 };
assign(test, { b: 2 }); // { a: 1, b: 2 }
console.log(test);      // { a: 1, b: 2 }

extend(object, [sources])

在 3.x 版本中，extend 是 assign 的别号，它们的作用是如出一辙的。
在 4.x 版本中，extend 是 assignIn 的别号，和 assign 有点区分。

官方定义以下：

This method is like _.assign except that it iterates over own and inherited source properties.

在上面的例子中，我们晓得 assign 函数不会把原型链上的属性兼并到目的对象，而 extend 或 assignIn 函数则会！

// Important !! this is Lodash 4.x !!

// 把源对象原型链上的属性也兼并到目的对象上！
function Foo() { this.c = 3; }
Foo.prototype.d = 4;
extend({ a: 1 }, new Foo());
// { a: 1, c: 3, d: 4 }

merge(object, [sources])

我们看看 merge 函数的定义：

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.

merge 也和 assign 相似，差别的处所在于 merge 碰到雷同属性的时刻，假如属性值为纯对象(plain object)或许鸠合(collection)时，不是用背面的属性值去掩盖前面的属性值，而是会把前后两个属性值兼并。
假如源对象的属性值为 undefined，则会疏忽该属性。

assign(
  {},
  { a: 1 },
  { b: { c: 2, d: 3} },
  { b: { e: 4 } }
)
// { a: 1, b: { e: 4 } }
merge(
  {},
  { a: 1 },
  { b: { c: 2, d: 3} },
  { b: { e: 4 } }
)
// { a: 1, b: { c: 2, d: 3, e: 4 } }

// 兼并鸠合
var users = {
  'data': [{ 'user': 'barney' }, { 'user': 'fred' }]
};
var ages = {
  'data': [{ 'age': 36 }, { 'age': 40 }]
};
merge({}, users, ages)
// { data: [ { user: 'barney', age: 36 }, { user: 'fred', age: 40 } ] }

// merge 函数会修正本来的对象！
merge(users, ages)
console.log(users) // { data: [ { user: 'barney', age: 36 }, { user: 'fred', age: 40 } ]

总结

雷同之处

• 都可以用来兼并对象

• 都邑修正本来的对象 (假如本来的对象是作为函数的第一个参数的话)

差别之处

• assign 函数不会处置惩罚原型链上的属性，也不会兼并雷同的属性，而是用背面的属性值掩盖前面的属性值

• extend

  • 3.x 版本中和 assign 一样

  • 4.x 版本中会兼并原型链上的属性

• merge 碰到雷同属性名的时刻，假如属性值是纯对象或鸠合的时刻，会兼并属性值

出处

http://scarletsky.github.io/2016/04/02/a…

参考资料

https://lodash.com/docs
http://stackoverflow.com/questions/19965…