[JavaScript知识库]js 深拷贝与浅拷贝

1. 引用类型与基础类型

基础类型存储在栈中，引用类型的值存储在堆中

• js引用类型：Object, Array, Date, Function
• js基础类型：Underfined, Null, Boolean, Number, String

2. 引用类型的拷贝问题

let oldValue = {name:'henry'}
let newValue = oldValue

newValue.name = 'Lisa'

console.log(oldValue)  // output: {name:'Lisa'}
console.log(newValue)  // output: {name:'Lisa'}

可以看到我们改变newValue的name属性之后，oldValue的name属性也被改变了，而这不是我们想要的结果

实际上，对于引用类型来说，我们将 oldValue 赋予 newValue 的时候，我们其实仅仅只是将 oldValue 存储在栈堆中的的引用赋予了 newValue ，而两个对象此时指向的是在堆内存中的同一个数据，所以当我们修改任意一个值的时候，修改的都是堆内存中的数据，而不是引用，所以只要修改了，同样引用此对象的值也自然而然的发生了改变

?

3. 深拷贝

js 默认的拷贝复制都是浅拷贝，即拷贝引用类型时不会在堆内存中开辟新的空间；深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据, 而不用担心数据之间会起冲突

• JSON.parse(JSON.stringify(oldValue))

?????????缺点 : 不可以拷贝 undefined ， function， RegExp 等等类型,无法解决循环引用

• Object.assign(target, source)?

????????缺点 : 第一层是深拷贝，嵌套再深入就是浅拷贝

• 递归拷贝（终极解决方案）

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target, map = new Map()) {
    // 判断类型，如果是基础类型直接返回
    if (typeof target === 'object' && target !== null) {
        // 利用函数缓存解决循环引用问题
        let cache = map.get(target)
        if (cache) {
            return cache;
        }

        let isArray = Array.isArray(target)
        const result = isArray ? [] : {}

        // 形成一个映射关系
        map.set(target,result)

        if(isArray){
            target.forEach((item,index)=>{
                result[index] = deepClone(item,map)
            })
        }else{
            // for  in 循环会遍历原型上的属性，因此不使用for in
            Object.keys(target).forEach(key=>{
                result[key] = deepClone(target[key],map)
            })
        }
        return result;
    }else{
        return target;
    }
}