資訊專欄INFORMATION COLUMN
摘要：簡介我們經常在別人的代碼中看見，，函數，這三個函數用起來很相似，都是合并源對象的屬性到目標對象中。會修改原來的對象在版本中，是的別名，它們的作用是一模一樣的。在版本中，是的別名，和有點區別。如果源對象的屬性值為，則會忽略該屬性。
簡介
我們經常在別人的代碼中看見 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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79107.html
摘要：實現合并對象的方法有很多種，比如也是用寫的，謝謝系列等，至于區別自己看文檔，文檔地址打造的一個不可變數據結構庫的方法其中，為原生方法，但是存在以下兩個在具體應用場景上的缺點瀏覽器兼容性問題只能進行淺合并關于淺合并深合并，碼友之述備矣，這里就 javascript實現合并對象的方法有很多種，比如： 1、Object.assign 2、jQuery.extend（jQuery也是用java...
摘要：數據管理及性能優化統一管理數據這一部份算是重頭戲吧。重復渲染導致卡頓這套的東西在家校群頁面上用得很歡樂，以至于不用怎么寫都沒遇到過什么性能問題。但放到移動端上，我們在列表頁重構的時候就馬上遇到卡頓的問題了。列表頁目前的處理辦法是將值換成。 本文來自于騰訊bugly開發者社區，非經作者同意，請勿轉載，原文地址：http://dev.qq.com/topic/57908... 最近一個季度...
摘要：問題描述我經常需要使用一些基礎性的功能性函數比如數據去重對象合并等通常情況下選擇方向大致有個自己實現使用原生的使用提供的首先放棄自己實現這樣的方式因為工作量大即使實現了沒有經過測試不夠穩定沒有意義因為已經存在現成的別人實現的其次如果原生提供 問題描述:我經常需要使用一些基礎性的, 功能性函數, 比如數據去重, 對象合并等. 通常情況下,選擇方向大致有3個: 自己實現 API 使用原生...
摘要：進階篇本文是繼新項目起手式之后的進階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項目中使用了另外特別注意不推薦在已有項目上強加，因寫法的組件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來 vue + typescript 進階篇 本文是繼 Vue + TypeScript 新項目起手式 之后的進階+踩坑配置，所以推薦先行閱讀前文 ...
閱讀 2472·2021-11-24 09:39
閱讀 3518·2019-08-30 15:53
閱讀 594·2019-08-29 15:15
閱讀 2903·2019-08-26 13:23
閱讀 3212·2019-08-26 10:48
閱讀 643·2019-08-26 10:31
閱讀 748·2019-08-26 10:30
閱讀 2359·2019-08-23 18:32
