資訊專欄INFORMATION COLUMN
摘要：簡介我們經(jīng)常在別人的代碼中看見，，函數(shù)，這三個函數(shù)用起來很相似，都是合并源對象的屬性到目標(biāo)對象中。會修改原來的對象在版本中，是的別名，它們的作用是一模一樣的。在版本中，是的別名，和有點區(qū)別。如果源對象的屬性值為，則會忽略該屬性。
簡介
我們經(jīng)常在別人的代碼中看見 assign，extend，merge 函數(shù)，這三個函數(shù)用起來很相似，都是合并源對象的屬性到目標(biāo)對象中。
既然都是合并對象，為什么還分三個不同的函數(shù)呢？它們之間到底有什么區(qū)別呢？
assign(object, [sources])我們先看看官方網(wǎng)站上面的定義：
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)的屬性分配到目標(biāo)對象(object)，源對象會從左往右地調(diào)用，后面對象的屬性會覆蓋前面的。
看看下面的例子:
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` 函數(shù)會忽略原型鏈上的屬性。
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 有點區(qū)別。
官方定義如下：
This method is like _.assign except that it iterates over own and inherited source properties.
在上面的例子中，我們知道 assign 函數(shù)不會把原型鏈上的屬性合并到目標(biāo)對象，而 extend 或 assignIn 函數(shù)則會！
// Important !! this is Lodash 4.x !!
// 把源對象原型鏈上的屬性也合并到目標(biāo)對象上！
function Foo() { this.c = 3; }
Foo.prototype.d = 4;
extend({ a: 1 }, new Foo());
// { a: 1, c: 3, d: 4 }
merge(object, [sources])
我們看看 merge 函數(shù)的定義：
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 函數(shù)會修改原來的對象！
merge(users, ages)
console.log(users) // { data: [ { user: "barney", age: 36 }, { user: "fred", age: 40 } ]
總結(jié)
相同之處
都可以用來合并對象
都會修改原來的對象 (如果原來的對象是作為函數(shù)的第一個參數(shù)的話)
不同之處assign 函數(shù)不會處理原型鏈上的屬性，也不會合并相同的屬性，而是用后面的屬性值覆蓋前面的屬性值
extend
3.x 版本中和 assign 一樣
4.x 版本中會合并原型鏈上的屬性
merge 遇到相同屬性名的時候，如果屬性值是純對象或集合的時候，會合并屬性值
出處http://scarletsky.github.io/2016/04/02/a...
參考資料https://lodash.com/docs
http://stackoverflow.com/questions/19965...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79107.html
摘要：實現(xiàn)合并對象的方法有很多種，比如也是用寫的，謝謝系列等，至于區(qū)別自己看文檔，文檔地址打造的一個不可變數(shù)據(jù)結(jié)構(gòu)庫的方法其中，為原生方法，但是存在以下兩個在具體應(yīng)用場景上的缺點瀏覽器兼容性問題只能進(jìn)行淺合并關(guān)于淺合并深合并，碼友之述備矣，這里就 javascript實現(xiàn)合并對象的方法有很多種，比如： 1、Object.assign 2、jQuery.extend（jQuery也是用java...
摘要：數(shù)據(jù)管理及性能優(yōu)化統(tǒng)一管理數(shù)據(jù)這一部份算是重頭戲吧。重復(fù)渲染導(dǎo)致卡頓這套的東西在家校群頁面上用得很歡樂，以至于不用怎么寫都沒遇到過什么性能問題。但放到移動端上，我們在列表頁重構(gòu)的時候就馬上遇到卡頓的問題了。列表頁目前的處理辦法是將值換成。 本文來自于騰訊bugly開發(fā)者社區(qū)，非經(jīng)作者同意，請勿轉(zhuǎn)載，原文地址：http://dev.qq.com/topic/57908... 最近一個季度...
摘要：問題描述我經(jīng)常需要使用一些基礎(chǔ)性的功能性函數(shù)比如數(shù)據(jù)去重對象合并等通常情況下選擇方向大致有個自己實現(xiàn)使用原生的使用提供的首先放棄自己實現(xiàn)這樣的方式因為工作量大即使實現(xiàn)了沒有經(jīng)過測試不夠穩(wěn)定沒有意義因為已經(jīng)存在現(xiàn)成的別人實現(xiàn)的其次如果原生提供 問題描述:我經(jīng)常需要使用一些基礎(chǔ)性的, 功能性函數(shù), 比如數(shù)據(jù)去重, 對象合并等. 通常情況下,選擇方向大致有3個: 自己實現(xiàn) API 使用原生...
摘要：進(jìn)階篇本文是繼新項目起手式之后的進(jìn)階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項目中使用了另外特別注意不推薦在已有項目上強(qiáng)加，因?qū)懛ǖ慕M件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來 vue + typescript 進(jìn)階篇 本文是繼 Vue + TypeScript 新項目起手式 之后的進(jìn)階+踩坑配置，所以推薦先行閱讀前文 ...
閱讀 2490·2021-11-24 09:39
閱讀 3532·2019-08-30 15:53
閱讀 607·2019-08-29 15:15
閱讀 2913·2019-08-26 13:23
閱讀 3228·2019-08-26 10:48
閱讀 654·2019-08-26 10:31
閱讀 780·2019-08-26 10:30
閱讀 2374·2019-08-23 18:32
