Javascript(五)之深浅拷贝

进阶路线

image.png

需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。

5.1浅拷贝

浅拷贝的意思就是只复制引用，而未复制真正的值。

浅拷贝的实现

function Clone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
        targetObj[keys] = source[keys];
    } 
  }
  return targetObj;
}

5.2 深拷贝

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。

只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。

目前实现深拷贝的方法不多，主要是两种：

1、利用 JSON 对象中的 parse 和 stringify
2、利用递归来实现每一层都重新创建对象并赋值

5.2.1 JSON.stringify/parse的方法

JSON.stringify 是将一个 JavaScript 值转成一个 JSON 字符串。

JSON.parse是将一个 JavaScript 值转成一个 JSON 字符串。

const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false

确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。比如下面这样的一个对象就不适用,undefined、function、symbol 会在转换过程中被忽略。

const originObj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}

5.2.2 递归深拷贝

递归的思想就很简单了，就是对每一层的数据都实现一次创建对象->对象赋值的操作，简单粗暴上代码：

function CloneDeep(source){
    // 判断复制的目标书数组还是对象
    var targetObj = source.constructor === Array ? [] : {};
    for(let keys in source){
        //判断对象是否包含特定的自身（非继承）属性。
        if(source.hasOwnProperty(keys)){
            //判断是否是对象或者数组
            if(source[keys] && typeof source[keys] === "object"){
                targetObj = source.constructor === Array ? [] : {};
                targetObj[keys] = CloneDeep(source[keys]);// 递归调用
            }else{
                targetObj[keys] = source[keys];
            }
        }
    }
    
    return targetObj;

}

一个简单的深拷贝就完成了，但是这个实现还存在很多问题。

没有对传入参数进行校验，传入 null 时应该返回 null 而不是 {}

对于对象的判断逻辑不严谨，因为 typeof null === 'object'

该进之后的写法

// 判断是否为对象
function isObject(obj){
        return typeof obj === 'object' && obj != null
}
function CloneDeep(source){
    // 判断复制的目标书数组还是对象
        if(!isObject(source)) return source;
    var targetObj = source.constructor === Array ? [] : {};
    for(let keys in source){
        //判断对象是否包含特定的自身（非继承）属性。
        if(source.hasOwnProperty(keys)){
            //判断是否是对象或者数组
            if(source[keys] && isObject(source[keys])){
                targetObj = source.constructor === Array ? [] : {};
                targetObj[keys] = CloneDeep(source[keys]);// 递归调用
            }else{
                targetObj[keys] = source[keys];
            }
        }
    }
    
    return targetObj;

}

循环引用问题
以下这种情况会造成死循环导致栈溢出

const obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;

const obj2 = CloneDeep(obj1); \\栈溢出

解决办法
解决方案很简单，其实就是循环检测，我们设置一个数组或者哈希表存储已拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回即可

// 判断是否为对象
function isObject(obj){
        return typeof obj === 'object' && obj != null
}
function CloneDeep(source,hash = new WeakMap()){
    // 判断复制的目标书数组还是对象
   if(!isObject(source)) return source;
   if (hash.has(source)) return hash.get(source); // 新增代码，查哈希表
    var targetObj = source.constructor === Array ? [] : {};
    hash.set(source, targetObj ); // 新增代码，哈希表设值
    for(let keys in source){
        //判断对象是否包含特定的自身（非继承）属性。
        if(source.hasOwnProperty(keys)){
            //判断是否是对象或者数组
            if(source[keys] && isObject(source[keys])){
                targetObj = source.constructor === Array ? [] : {};
                targetObj[keys] = CloneDeep(source[keys]);// 递归调用
            }else{
                targetObj[keys] = source[keys];
            }
        }
    }
    
    return targetObj;

}

破解递归爆栈

function cloneDeep(x) {
    const root = {};

    // 栈
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 广度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

5.3 参考优秀文章

JavaScript基础心法——深浅拷贝
面试题之如何实现一个深拷贝
深拷贝的终极探索（90%的人都不知道）