js中的深浅拷贝-解决循环引用

深拷贝

前言

        深拷贝挺耗时的，这就要求我们在设计数据结构时层级不要太深，能浅拷贝解决最好，所以一些框架在数据处理方面也只是进行浅拷贝。

递归-解决循环引用

        封装深拷贝函数，我们需要考虑数组和对象中循环引用的问题，比如window就是循环引用（window.window === window）。

        解决办法就是借用一个容器WeakMap【对元素弱引用，避免内存泄漏，并且还能用引用类型多为key】，用被拷贝数据作为key，拷贝后的数据作为value进行存储，在拷贝方法最开始就去用被拷贝数据作为key去访问WeakMap，有value就直接返回，从而解决循环引用。代码见下：

function deepCopy(oldVal, map1 = new WeakMap()) {
    function getType(val) {
        let str = Object.prototype.toString.call(val)
        return str.slice(8, str.length - 1)
    }

    if (getType(map1) !== 'WeakMap') {
        map1 = new WeakMap //解决第一次调用，用户传入第二个参数，并且不是weakMap类型
    }
    
    if (map1.has(oldVal)) {
        return map1.get(oldVal)
    }

    let result = null
    let type = getType(oldVal)

    
    // 先处理对象和数组
    if (type === 'Object' || type === 'Array') {
        result = type === 'Object' ? {} : []
  
        // 对象和数组都可能循环引用，所以建议一起处理
        map1.set(oldVal, result)
        for (let i in oldVal) {//遍历自身和原型上的普通可迭代属性
            result[i] = deepCopy(oldVal[i], map1) //将参数map1传进去，保证之后都是map1
        }
        // 对象可能有Symbol属性名
        Object.getOwnPropertySymbols(oldVal).forEach((item) => {
            result[item] = deepCopy(oldVal[item], map1)
        })

        return result
    } else if (type === 'Symbol') {
        // Symbol数据基本数据类型,但是作为值时希望其是独一无二的，所以需要重新创建。
        return Symbol(oldVal.description)
    } else if (type === 'Set' || type === 'Map') {

        result = type === 'Set' ? new Set() : new Map()
        oldVal.forEach((item, index) => { //forin遍历无效，可以用forof
            if (type === 'Set') {
                result.add(deepCopy(item), map1))
            } else {
                result.set(index, deepCopy(item), map1))
            }
        })
        return result
    } else {
        // 其他类型直接返回	（number、string、null、undefined、function...）
        return oldVal
    }
}

JSON.parse(JSON.stringify(数据))

        这个方法可以完成深拷贝，但是JSON.stringify()会将对象中属性值为undefined的属性给删掉，并将数组中的undefined替换为null，并且也没有解决循环引用的问题。

第三方库

jq的$.extend(true,{},obj)方法

var obj1 = {
  a: 1,
  b: { c: 2 }
};

var obj2 = $.extend(true, {}, obj1);

 Lodash的cloneDeep(obj)

var obj1 = {
  a: 1,
  b: { c: 2 }
};

var obj2 = _.cloneDeep(obj1);

浅拷贝

        浅拷贝只会拷贝对象的第一层。等号不是浅拷贝，是赋值。

展开运算符

let obj = {age : 12}
{...obj} // 源数据是什么类型就用什么包裹

Object.assign(target,source...)

let obj = {age:12}
Object.assign({},obj)

END