1. 程式人生 > >JavaScript中的深拷貝和淺拷貝方法總結

JavaScript中的深拷貝和淺拷貝方法總結

在日常的程式碼書寫中常常會遇到拷貝問題,今天我們就來總結一下常用的淺拷貝和深拷貝都有哪些實現方法。

淺拷貝常用方法:

slice

var arr1=[1,2],arr2=arr1.slice();
console.log(arr1);//[1,2]
console.log(arr2);//[1,2]

concat

var arr1=[1,2],arr2=arr1.concat();
console.log(arr1);//[1,2]
console.log(arr2);//[1,2]

Object.assign()

Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。該函式還有很多用處,可點選

這裡檢視。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = {
  a: 1,
  b: 5,
  n: 3
};
const object3 = Object.assign({},object2, object1);

console.log(object2);//{ a: 1, b: 5, n: 3 }
console.log(object3);//{ a: 1, b: 2, n: 3, c: 3 }

深拷貝

JSON.parse(JSON.stringify(obj))

關於序列化,有下面五點注意事項:
1、非陣列物件的屬性不能保證以特定的順序出現在序列化後的字串中。
2、布林值、數字、字串的包裝物件在序列化過程中會自動轉換成對應的原始值。
3、undefined、任意的函式以及 symbol 值,在序列化過程中會被忽略(出現在非陣列物件的屬性值中時)或者被轉換成 null(出現在陣列中時)。
4、所有以 symbol 為屬性鍵的屬性都會被完全忽略掉,即便 replacer 引數中強制指定包含了它們。
5、不可列舉的屬性會被忽略

所以當遇到下面的物件型別時,這個深拷貝方法將不管用:

var obj1 = {
    x: 1,
    y: undefined,
    z: function add(z1, z2) {
        return z1 + z2
    },
    a: Symbol("foo")
};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1) //{x: 1, y: undefined, z: ƒ, a: Symbol(foo)}
console.log(JSON.stringify(obj1)); //{"x":1}
console.log(obj2) //{x: 1}

深拷貝函式

function deepCopy(obj){
    let result={}
    let keys=Object.keys(obj),
            key=null,
            temp=null;
            console.log(keys);
    for(let i=0;i<keys.length;i++){
        key=keys[i];
        temp=obj[key];
        if(temp&&typeof temp ==='object'){
            result[key]=deepCopy(temp);
        }else{
            result[key]=temp;
        }
    }
    return result;
}

var obg1={
    x:123,
    y:{
        z:{
            k:"4"
        }
    },
    m:2
}

var copy=deepCopy(obg1);

copy.y.z.k=5
console.log(copy);
console.log(obg1);

$extend(boolean,dest,src1,src2,src3…)

第一個引數boolean代表是否進行深度拷貝,詳見連結

var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

結果:
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
);
結果:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}