Lodash 中 assign，extend 和 merge 的区别

solocoder 发布于2019-08-19 18:02 / 1124人阅读

摘要：简介我们经常在别人的代码中看见，，函数，这三个函数用起来很相似，都是合并源对象的属性到目标对象中。会修改原来的对象在版本中，是的别名，它们的作用是一模一样的。在版本中，是的别名，和有点区别。如果源对象的属性值为，则会忽略该属性。

简介

我们经常在别人的代码中看见 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...

GPU云服务器云服务器中SP与DP的区别宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79107.html

JavaScript复制（合并）对象

摘要：实现合并对象的方法有很多种，比如也是用写的，谢谢系列等，至于区别自己看文档，文档地址打造的一个不可变数据结构库的方法其中，为原生方法，但是存在以下两个在具体应用场景上的缺点浏览器兼容性问题只能进行浅合并关于浅合并深合并，码友之述备矣，这里就 javascript实现合并对象的方法有很多种，比如： 1、Object.assign 2、jQuery.extend（jQuery也是用java...

vslam 2019-08-21 16:58 评论0 收藏0
【腾讯Bugly干货分享】React 移动 web 极致优化

摘要：数据管理及性能优化统一管理数据这一部份算是重头戏吧。重复渲染导致卡顿这套的东西在家校群页面上用得很欢乐，以至于不用怎么写都没遇到过什么性能问题。但放到移动端上，我们在列表页重构的时候就马上遇到卡顿的问题了。列表页目前的处理办法是将值换成。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57908... 最近一个季度...

suosuopuo 2019-08-21 10:54 评论0 收藏0
关于API 选择的一些思考.

摘要：问题描述我经常需要使用一些基础性的功能性函数比如数据去重对象合并等通常情况下选择方向大致有个自己实现使用原生的使用提供的首先放弃自己实现这样的方式因为工作量大即使实现了没有经过测试不够稳定没有意义因为已经存在现成的别人实现的其次如果原生提供问题描述:我经常需要使用一些基础性的, 功能性函数, 比如数据去重, 对象合并等. 通常情况下,选择方向大致有3个: 自己实现 API 使用原生...

Tychio 2019-08-20 18:52 评论0 收藏0
vue + typescript 进阶篇

摘要：进阶篇本文是继新项目起手式之后的进阶踩坑配置，所以推荐先行阅读前文完整阅读完之后，基本可以顺利在新项目中使用了另外特别注意不推荐在已有项目上强加，因写法的组件跟之前的组件不兼容，若上的话需要修改之前写的组件配置完整版可参考，若没配置出来 vue + typescript 进阶篇本文是继 Vue + TypeScript 新项目起手式之后的进阶+踩坑配置，所以推荐先行阅读前文 ...

lemanli 2019-08-21 17:28 评论0 收藏0