Js中深拷贝和浅拷贝理解

一、对象的深拷贝与浅拷贝

　　1.递归的方法实现深拷贝

function deepCopy(source){
    if(!isObject(source)) return source;
    let target = Array.isArray(source)?[]:{};
    for(var k in source){
        if(soucre.hasOwnProperty(k)){
            if(typeof source[k] =='object'){
                target[k] = deepCopy(source[k]);
            }else{
                target[k] = source[k]
            }
        }
    }
    return target;
}
function isObject(obj){
    return typeof obj==='object' && obj!==null
}
var obj1 = deepCopy(obj);
obj1.name='meituan';
obj1.age = 7;
obj1.others[2]=3;
console.log(JSON.stringify(obj1));
console.log(JSON.stringify(obj))
//{"name":"meituan","age":7,"others":[1,2,3]}
//{"name":"youbei","age":9,"others":[1,2]}

　　注：这种递归的实现方式，只能基本使用，并不能解决环引用问题，具体更完善的深拷贝可参考下边这篇文章：

　　深拷贝有这5个段位，你只是青铜段位？还想涨薪？

　　2.通过JSON对象实现深拷贝 

function deepClone2(obj) {
  let _obj = JSON.stringify(obj),
  return JSON.parse(_obj);
}

　　注意：无法实现对象中方法的深拷贝，处理不了函数

　　3.通过Object.assign()拷贝（当对象只有一级属性为深拷贝；当对象中有多级属性时，二级属性后就是浅拷贝）

var obj = {
  name:'youbei',
  age:9,
}
var obj1 = Object.assign({},obj);
obj1.name='meituan';
obj1.age = 7;
console.log(obj.name,obj.age); 

　　Object.assign 也算是浅拷贝，也就是如果源对象里的某些key对应的值是object类型,则只会拷贝对此object类型数据的引用，也就是说会多处共用一个储存空间，一个地方改变了，其他地方在取值也就变了。

 

var obj = {
  name:'youbei',
  age:9,
  others:[1,2],
}
var obj1 = Object.assign({},obj);
obj1.name='meituan';
obj1.age = 7;
obj1.others[2]=3;
console.log(JSON.stringify(obj1));
//{"name":"meituan","age":7,"others":[1,2,3]}
console.log(JSON.stringify(obj));
//{"name":"youbei","age":9,"others":[1,2,3]}

 

二、 数组的深拷贝与浅拷贝

　　1. concat(arr1, arr2,....)       仅适用于对不包含引用对象的一维数组的深拷贝

　　　　注意：当数组中的元素均为一维是深拷贝 数组中元素一维以上是值的引用

　　2.slice(idx1, idx2)                 仅适用于对不包含引用对象的一维数组的深拷贝

　　　　1.没有参数是拷贝数组

　　　　2.只有一个参数是从该位置起到结束拷贝数组元素

　　　　3.两个参数，拷贝从起始位置到结束位置的元素（不包含结束位置的元素：含头不含尾）

　　　　注意：当数组中的元素均为一维是深拷贝，数组中元素一维以上是值的引用

　　3.es6方法                              仅适用于对不包含引用对象的一维数组的深拷贝

    var a=[1,2,3]
    var b=[...a];
    b.push(4);
    console.log(b);//1,2,3,4
    console.log(a)//1,2,3