您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)如何使用JS基于對象實現(xiàn)合并功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
淺拷貝的方式實現(xiàn)對象合并
之前的一篇博文 有專門介紹對象和數(shù)組的深淺拷貝,不了解的童鞋請移步。先看實現(xiàn)再解釋
function extend() { //extend 淺拷貝實現(xiàn) var name,options,copy, length = arguments.length, i = 1, target = arguments[0] || {}; //取目標對象 if(['object','function'].indexOf(typeof target) < 0){ target = {}; } for(;i<length;i++){ options = arguments[i] if(options != null){ //排除空參數(shù)的情況 extend({},,) for(name in options){ //遍歷對象 賦值 copy = options[name]; if (copy !== undefined) { target[name] = copy; } } } } return target } //測試數(shù)據(jù) var test1 = { a : 1, b : { c : 2, d : 3 }, e : [1,'a'] }, test2 = { b : { c : 4, d : 5, f : 6 }, e : [1,'a'], g : 7 } var test = extend({},test1,test2); console.log(test.b.d); //5 test2.b.d = 'x'; //修改test2 console.log(test.b.d); // 'x' test隨之修改
思路如下:
1、默認取第一個參數(shù)為目標對象,若第一個參數(shù)非對象數(shù)據(jù)類型,則賦值為空對象
2、遍歷剩下的參數(shù)(源對象),將源對象的屬性復制到目標對象上 。
3、返回目標對象為合并的結(jié)果
在第二步中沒有對源對象的屬性值進行判斷,所有的全部使用 ‘=' 賦值,所以當源對象的屬性值為對象屬性時,復制的只是引用值,即為淺拷貝的方式,在測試結(jié)果中可以看出 test 和 test2 的 b 屬性的屬性值,使用的是同一個對象,會互相影響。知道了這些之后,如何實現(xiàn)合并時的深拷貝也應(yīng)該有思路了。
深度拷貝的方式實現(xiàn)對象合并
需要在復制源對象屬性值時,判斷值的類型,如果是對象數(shù)據(jù)類型,則遞歸調(diào)用extend函數(shù)。則可以實習深拷貝方式的對象合并,實現(xiàn)如下:
function extend() { //extend 深拷貝實現(xiàn) var name,options,src,copy, deep = false, //是否深拷貝 默認為false length = arguments.length, i = 1, target = arguments[0] || {}; //如果第一個參數(shù)為boolean類型,賦值給deep if(typeof target == 'boolean'){ deep = arguments[0]; target = arguments[i] || {}; //目標對象順延 i++; } //如果target不是對象數(shù)據(jù)類型的話 target賦值為 {} if(['object','function'].indexOf(typeof target) < 0){ target = {}; } for(;i<length;i++){ options = arguments[i]; if(options != null){ for(name in options){ copy = options[name]; src = target[name]; if(target === copy){ //避免重復循環(huán) continue; } if(deep && copy && (typeof copy == 'object')){ // 類型判斷 src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //區(qū)分數(shù)組和‘對象' target[name] = extend(deep,src,copy); }else { if (copy !== undefined) { target[name] = copy; } } } } } return target }
1、參數(shù)判斷,若第一個參數(shù)為布爾類型,則取為控制是否深度拷貝的參數(shù)deep , deep 默認為false;同時 目標元素會是第二個參數(shù)
2、復制屬性值時,要判斷deep參數(shù)和 屬性值的類型 ; 若 deep為true 且 屬性值為對象類型 則遞歸調(diào)用 extend函數(shù) , 否則直接賦值
3、需要區(qū)分 數(shù)組 和 ‘對象' ,來給 目標對象的屬性賦值不同的初始值。如果都是 {} 的話,數(shù)組類型的屬性值復制到目標元素上會變?yōu)?{'0':xx , '1' : xx ...}
感謝各位的閱讀!關(guān)于“如何使用JS基于對象實現(xiàn)合并功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。