五. JavaScript實現對象合并功能

標籤：元素   引用   完全   修改   jquer   通過   query   amp   for   

jQuery 中的 $.extend() 是經常使用到工具函數，多用於合并參數（對象）extend(bool,{},item1,item2….)

bool型參數為true表示深拷貝，為false時表示淺拷貝。{}表示合并結果放入其中，具體可以通過一下樣本來說明：

樣本：

var item={name：“olive”,age:23,address{provice:”河南”,city:”鄭州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

結果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

說明：

以上結果說明，當參數為ture時，即為深拷貝，當子項item1中的子項有與item中的子項相同屬性的值不一樣時，item1中子項的值會將item子項中的值給覆蓋，當子項item1的屬性跟item中的屬性不同時，會與item進行合并。

當參數為false時，子項item1中的子項中與item中的子項屬性相同時，item1中子項的屬性值會將item中的值給完全覆蓋。

 

本文參考了jQuery的extend方法的源碼，將自己實現對象合并，即將多個對象的屬性複製到目標對象上，若有相同的屬性，後面的對象覆蓋前面的。

淺拷貝的方式實現對象合并

function extend() {  //extend 淺拷貝實現      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){  //排除空參數的情況 extend({},,)          for(name in options){   //遍曆對象 賦值            copy = options[name];            if (copy !== undefined) {              target[name] = copy;            }          }        }      }      return target      }   //測試資料     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、預設取第一個參數為目標對象，若第一個參數非對象資料類型，則賦值為空白對象

　　2、遍曆剩下的參數（來源物件），將來源物件的屬性複製到目標對象上 。

　　3、返回目標對象為合并的結果

　　在第二步中沒有對來源物件的屬性值進行判斷，所有的全部使用 ‘=’ 賦值，所以當來源物件的屬性值為對象屬性時，複製的只是引用值，即為淺拷貝的方式，在測試結果中可以看出 test 和 test2 的 b 屬性的屬性值，使用的是同一個對象，會互相影響。知道了這些之後，如何?合并時的深拷貝也應該有思路了。

 

深度拷貝的方式實現對象合并

　　需要在複製來源物件屬性值時，判斷值的類型，如果是對象資料類型，則遞迴調用extend函數。則可以實習深拷貝方式的對象合并，實現如下：

function extend() {  //extend 深拷貝實現      var name,options,src,copy,          deep = false,  //是否深拷貝 預設為false          length = arguments.length,          i = 1,          target = arguments[0] || {};      //如果第一個參數為boolean類型,賦值給deep      if(typeof target  == ‘boolean‘){        deep = arguments[0];        target = arguments[i] || {}; //目標對象順延        i++;      }      //如果target不是對象資料類型的話  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){  //避免重複迴圈              continue;            }            if(deep && copy && (typeof copy == ‘object‘)){ // 類型判斷              src = Object.prototype.toString.call(copy) == ‘[object Array]‘ ? [] : {};  //區分數組和‘對象’              target[name] = extend(deep,src,copy);            }else {              if (copy !== undefined) {                target[name] = copy;              }            }          }        }      }      return target    }

　　1、參數判斷，若第一個參數為布爾類型，則取為控制是否深度拷貝的參數deep , deep 預設為false；同時 目標元素會是第二個參數

　　2、複製屬性值時，要判斷deep參數和 屬性值的類型 ； 若 deep為true 且 屬性值為物件類型 則遞迴調用 extend函數 ， 否則直接賦值

　　3、需要區分 數組 和 ‘對象’ ，來給 目標對象的屬性賦值不同的初始值。如果都是 {} 的話，數群組類型的屬性值複製到目標元素上會變為 {‘0‘:xx , ‘1‘ : xx ...}

 

五. JavaScript實現對象合并功能