1. 程式人生 > >五. JavaScript實現對象合並功能

五. JavaScript實現對象合並功能

cti code 判斷 st2 ava targe ive 沒有 若有

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實現對象合並功能