JavaScript中的深拷贝和浅拷贝方法总结

版权声明： https://blog.csdn.net/qq_30868289/article/details/80207756

在日常的代码书写中常常会遇到拷贝问题，今天我们就来总结一下常用的浅拷贝和深拷贝都有哪些实现方法。

浅拷贝常用方法：

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"}}