五. JavaScript實現對象合併功能

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隨之修改

思路以下：

　　一、默認取第一個參數爲目標對象，若第一個參數非對象數據類型，則賦值爲空對象

　　二、遍歷剩下的參數（源對象），將源對象的屬性複製到目標對象上 。

　　三、返回目標對象爲合併的結果

　　在第二步中沒有對源對象的屬性值進行判斷，全部的所有使用 ‘=’ 賦值，因此當源對象的屬性值爲對象屬性時，複製的只是引用值，即爲淺拷貝的方式，在測試結果中能夠看出 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
    }

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

　　二、複製屬性值時，要判斷deep參數和 屬性值的類型 ； 若 deep爲true 且 屬性值爲對象類型 則遞歸調用 extend函數 ， 不然直接賦值

　　三、須要區分 數組 和 ‘對象’ ，來給 目標對象的屬性賦值不一樣的初始值。若是都是 {} 的話，數組類型的屬性值複製到目標元素上會變爲 {'0':xx , '1' : xx ...}