1. 程式人生 > >JavaScript中【陣列的合併】和【物件的合併 (淺克隆,深克隆)】

JavaScript中【陣列的合併】和【物件的合併 (淺克隆,深克隆)】

1. 數組合並

1.1 陣列concat()方法

    //concat()
    //陣列的拼接方法,返回拼接後的新陣列
    var arr1 = [1,2,3];
    var arr2 = [5,6,7];
    var res = arr1.concat(arr2);
    console.log(res); //[1,2,3,5,6,7]
    console.log(arr1); //[1,2,3] arr1自身沒有改變 

1.2 遍歷迴圈陣列

    //迴圈遍歷陣列
    //for infor of是遍歷物件用的,前者遍歷物件的key,後者遍歷物件的value
    var
arr1 = ['a','b']; var arr2 = ['c','d','e']; for(var i = 0; i < arr2.length; i++){ arr1.push(arr2[i]); } console.log(arr1); //['a','b','c','d','e']

1.3 apply方法

合併陣列用Array.prototype.push.apply(arr1,arr2)或者arr1.push.apply(arr1,arr2)

    //apply
    var arr1 = [2,3];
    var arr2 = [5
,6,7]; Array.prototype.push.apply(arr1,arr2); //指向arr1,apply接收陣列並執行 //arr1.push.apply(arr1,arr2); console.log(arr1); //[2,3,5,6,7]

2. 物件的合併

2.1 Object.assign()

可以把任意多個的源物件自身的可列舉屬性拷貝給目標物件,然後返回目標物件。
Object.assign(target, …sources)
第一個引數:target(目標物件),之後引數都是源物件

    //Object.assign()
    var
obj1 = { a : 1, b : 2 }; var obj2 = { c : 3, d : 6 }; var obj3 = { e : 7, }; var res1 = Object.assign({},obj1,obj2); var res2 = Object.assign(obj1 , obj2 , obj3); console.log(res1); //{a: 1, b: 2, c: 3, d: 6} console.log(res2); //{a: 1, b: 2, c: 3, d: 6, e: 7} console.log(obj1); //目標物件也改變了{a: 1, b: 2, c: 3, d: 6, e: 7}

2.2 迴圈遍歷物件(for in)

    //物件遍歷賦值
    var obj1 = {
        a : 1,
        b : 2
    };
    var obj2 = {
        c : 3,
        d : 6
    };
    for(var key in obj2){
        //此處hasOwnProperty是判斷自有屬性,
        //使用for in迴圈遍歷物件的屬性時,
        //原型鏈上的所有屬性都將被訪問會避免原型物件擴充套件帶來的干擾
       if(obj2.hasOwnProperty(key) === true){
           obj1[key] = obj2[key];
       }
    }
    console.log(obj1); //{a: 1, b: 2, c: 3, d: 6}

2.4 物件的深拷貝和淺拷貝

jQuery例子:
淺拷貝

    //淺拷貝
    var obj1 = {
        a : 1,
        b : 2
    };
    var obj2 = {
        c : 3,
        d : 6
    };
    $.extend(false , obj1 , obj2); 
    console.log(obj1);
    obj1.a = 666; //obj2重新賦值
    console.log(obj1.a); //666 obj1.b僅拷貝了物件的指標,所以受原obj2的影響

深拷貝

    //深拷貝
    var obj1 = {
        a : 1,
        b : 2
    };
    var obj2 = {
        c : 3,
        d : 6
    };
    $.extend(true, obj1 , obj2); //true代表深度拷貝
    console.log(obj1); //{a: 1, b: 2, c: 3, d: 6}
    obj1.a = 666;
    console.log(obj1.a); //1 obj1拷貝了obj2的所有屬性以及值,並不受obj2的影響

JavaScript例子
淺拷貝

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

深拷貝

    var china = {
        nation : '中國',
        birthplaces:['北京','上海','廣州'],
        skincolr :'yellow',
        friends:['sk','ls']
    }
      //深複製,要想達到深複製就需要用遞迴
      function deepCopy(o,c){
        var c = c || {}
        for(var i in o){
        if(typeof o[i] === 'object'){
                //要考慮深複製問題了
                if(o[i].constructor === Array){
                        //這是陣列
                        c[i] =[]
                    }else{
                        //這是物件
                        c[i] = {}
                    }
                    deepCopy(o[i],c[i])
               }
               else{
                 c[i] = o[i]
               }
           }
           return c
      }
      var result = {name:'result'}
      result = deepCopy(china,result)
      console.dir(result)