JavaScript深浅拷贝的实现

• 对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况

    let a = {
        age: 1
    }
    let b = a
    a.age = 2
    console.log(b.age) // 2

浅拷贝

• Object.assign : 拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝

    let a = {
        age: 1
    }
    let b = Object.assign({}, a)
    a.age = 2
    console.log(b.age) // 1

• 通过展开运算符 ... 来实现浅拷贝

    let a = {
        age: 1
    }
    let b = {...a}
    a.age = 2
    console.log(b.age) // 1

深拷贝

• JSON.parse(JSON.stringify(object))
  • 会忽略 undefined
  • 会忽略 symbol
  • 不能序列化函数
  • 不能解决循环引用的对象,会报错抛出异常

    let a = {
    age: 1,
        jobs: {
            first: 'FE'
        }
    }
    let b = JSON.parse(JSON.stringify(a))
    a.jobs.first = 'native'
    console.log(b.jobs.first) // FE

    let a = {
        age: undefined,
        sex: Symbol('male'),
        jobs: function() {},
        name: 'yck'
    }
    let b = JSON.parse(JSON.stringify(a))
    console.log(b) // {name: "yck"}

• 递归

    function isObject(obj) {
        //Object.prototype.toString.call(obj) === '[object Object]'要保留数组形式，用在这里并不合适
        return typeof obj === 'object' && obj != null
    }

    function cloneDeep1(obj){
        if(!isObject(obj)) return obj
        var newObj = Array.isArray(obj)? [] : {}
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = isObject(obj[key])? cloneDeep1(obj[key]) : obj[key]
            }
        }
        return newObj
    }

• 问题：递归方法最大的问题在于爆栈，当数据的层次很深是就会栈溢出，例如循环引用

    var a = {
        name: "muyiy",
        a1: undefined,
        a2: null,
        a3: 123,
        book: {title: "You Don't Know JS", price: "45"}
    }
    a.circleRef = a
    
    // TypeError: Converting circular structure to JSON
    JSON.parse(JSON.stringify(a))

    //Uncaught RangeError: Maximum call stack size exceeded at Object.hasOwnProperty (<anonymous>)
    cloneDeep1(a)

复制代码

• 解决方法：循环检测（设置一个数组或者哈希表存储已拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回即可）

//哈希表
function cloneDeep3(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] = cloneDeep3(source[key], hash); // 新增代码，传入哈希表
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

//数组
function cloneDeep3(source, uniqueList) {

    if (!isObject(source)) return source; 
    if (!uniqueList) uniqueList = []; // 新增代码，初始化数组
      
    var target = Array.isArray(source) ? [] : {};
    
    // 数据已经存在，返回保存的数据
    var uniqueData = find(uniqueList, source);
    if (uniqueData) {
        return uniqueData.target;
    };
        
    // 数据不存在，保存源数据，以及对应的引用
    uniqueList.push({
        source: source,
        target: target
    });

    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep3(source[key], uniqueList); // 新增代码，传入数组
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 新增方法，用于查找
function find(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if (arr[i].source === item) {
            return arr[i];
        }
    }
    return null;
}