js浅拷贝与深拷贝，及深拷贝的几种实现方式

浅拷贝与深拷贝

浅拷贝和深拷贝的对比，主要体现在引用数据类型的拷贝上，对于浅拷贝来说，B拷贝了A，A改变，B会受影响也发生改变，主要原因是，A和B在浅拷贝时只复制了指向对象的指针，A、B的指针指向堆内存的同一块区域。对于深拷贝来说，是复制并创建一个一模一样的对象，也就是在内存中重新开辟一块区域，所以B拷贝了A，A发生改变时，B不受影响。

浅拷贝的实现：

function cloneShallow(source){
var target = {};
for(var key in source){
    //判断一个属性是在对象本身而不是继承自原型链，判断key属性是否是在对象本身
    if(Object.prototype.hasOwnProperty.call(source,key)){
        target[key] = source[key];
    }
}
return target;
}

深拷贝

实现思路，浅拷贝第一层，判断如果为对象则进行递归浅拷贝。

function cloneDeep1(source){
    var target = {};
    for(var key in source){
        if(Object.prototype.hasOwnProperty.call(source,key)){
            if(typeof source[key] == 'object') {
                target[key] = cloneDeep1(source[key]);
            }else{
                target[key] = source[key]
            }
        }
    }
    return target
}

上面这种方法，没有考虑值为null的情况，当值为null时会克隆为{}。做出修改，
思路为：进行传入参数进行判断，当传入null时返回null，优化对象的判断逻辑。同时考虑数组的兼容

//判断是否为对象
function isObject(obj){
    return typeof obj === 'object' && obj != null;
}
//克隆，添加数组的判断
function deepClone2(source){
    if(!isObject(source)) return source;//非对象返回自身

    var target = Array.isArray(source) ? [] : {};//数组判断
    for(var key in source){
        if(Object.prototype.hasOwnProperty.call(source,key)){
            if(isObject(source[key])){
                target[key] = deepClone2(source[key]);
            }else{
                target[key] = source[key]
            }
        }
    }
    return target;
}

循环引用，深拷贝的实现

循环引用：简单说就是a对象的属性为a本身
解决方案：使用一个哈希表存储已经拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回。

//深拷贝解决循环依赖问题采用es6的WeakMap

function deepClone3(source, hash = new WeakMap()){
    if(!isObject(source)) return source;
    if(hash.has(source)) return hash.get(source)//新增代码查哈希表
    var target = Array.isArray(source)? [] : {};
    hash.set(source, target);

    for(var key in source){
        if(Object.prototype.hasOwnProperty.call(source, key)){
            if(isObject(source[key])){
                target[key] = deepClone3(source[key],hash);//新增代码，传入哈希表
            }else{
                target[key] = source[key]
            }
        }
    }
    return target
}

测试用例：

var a = {
    name:"yuanyuan",
    book:{
        title:"you like js",
        price:'45'
    },
    a1: undefined,
    a2: null,
    a3: 123
}

var b = cloneShallow(a);
var c = cloneDeep1(a);
var d = deepClone2(a);

a.circleRef = a;

var f = deepClone3(a);
var e = deepClone4(a);

a.name = "高级前端进阶";//基本数据类型参数不变
a.book.price = "65";//引用数据类型拷贝，浅拷贝时受影响，深拷贝时不受影响
//浅拷贝 a变了，b没变
console.log(b)
console.log(c)
console.log(d)
console.log(f);
console.log(e);

测试结果

image.png

参考：https://segmentfault.com/a/1190000019462847
文中解决循环引用使用数组的方法，试了之后发现A的改变会影响B
测试结果如下：

image.png