實作物件合併功能的方法

前言

　　jQuery 中的$.extend() 是經常使用到工具函數，多用於合併參數（物件），具體用法在這裡不過多贅述，可透過傳參控制合併過程中是否使用深度拷貝；而ES2015中新增的Object.assign()方法，也可以實現物件的合併，不過合併過程中使用的是淺拷貝；本文參考了jQuery的extend方法的源碼，將自己實現物件合併，即將多個物件的屬性複製到目標物件上，若有相同的屬性，後面的物件會覆寫前面的。

淺拷貝的方式實現物件合併

　　之前的一篇部落格文章 有專門介紹物件和陣列的深淺拷貝，不了解的童鞋請移步。先看實作再解釋

    function extend() {  //extend 浅拷贝实现
      var name,options,copy,
          length = arguments.length,
          i = 1,
          target = arguments[0] || {};  //取目标对象
      
    if([&#39;object&#39;,&#39;function&#39;].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,&#39;a&#39;]
    },
    test2 = {
      b : {
        c : 4,
        d : 5,
        f : 6
      },
      e : [1,&#39;a&#39;],
      g : 7
    }    var test = extend({},test1,test2);
    console.log(test.b.d);   //5
    test2.b.d = &#39;x&#39;;  //修改test2
    console.log(test.b.d);  // &#39;x&#39;   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([&#39;object&#39;,&#39;function&#39;].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 == &#39;object&#39;)){ // 类型判断
              src = Object.prototype.toString.call(copy) == &#39;[object Array]&#39; ? [] : {};  //区分数组和‘对象’
              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 ...}

結語

　　一直都是在直接使用$.extend()，好用但是不是很清楚其中的實現，自己*，也許實現上還有不嚴謹的地方，但是覺得收穫還是不錯的。

以上是實作物件合併功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！