【JS】深拷贝和浅拷贝

数据类型存储（堆和栈）

栈一般存储基本数据类型
堆一般存储引用数据类型，但是栈内存会提供一个引用的地址指向堆内存中的值
所以就出现了深浅拷贝

对象的引用赋值

<script>
  const info1 = { name: 'aa', age: 18 }
  const obj1 = info1
  info1.name = 'kobe'
  console.log(obj1.name) //kobe 引用（指向）的是同一个对象
</script>

浅拷贝

浅拷贝：
拷贝一个对象时，只拷贝对象的引用，此时其中一个对象改变都会影响到另一个对象。
浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存。

1.Object.assign()
//会把info对象所有的属性拷贝到｛｝中，会将拷贝的对象作为返回值返回出去用obj接受，会创建一个新的对象，拷贝所有的属性，保存对象的引用

2.slice()
3.concat()
4.拓展运算符

使用object.assign有几点需要注意
1.它不会拷贝对象的继承属性
2.它不会拷贝对象的不可枚举属性
3.可以拷贝Symbol类型的属性

深拷贝

深拷贝：
拷贝一个对象时，不仅对对象的引用进行复制，还要把对象的值也一起拷贝。这样进行深拷贝后的对象和源对象相互独立，其中一个对象改动都不会对另一个对象有任何影响。

深拷贝会创造一个一模一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象。

1.JSON转换JSON.parse(JSON.stringify(copyObj))
缺点：
（1）如果对象里有函数,函数无法被拷贝下来
（2）无法拷贝copyObj对象原型链上的属性和方法
（3）当数据的层次很深，会栈溢出
2.普通递归函数

function deepCopy( source ) {
if (!isObject(source)) return source; //如果不是对象的话直接返回
    let target = Array.isArray( source ) ? [] : {} //数组兼容
    for ( var k in source ) {
        if (source.hasOwnProperty(k)) {
            if ( typeof source[ k ] === 'object' ) {
                target[ k ] = deepCopy( source[ k ] )
            } else {
                target[ k ] = source[ k ]
            }
        }
    }
    return target
}

function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}

缺点：
（1）无法保持引用
（2）当数据的层次很深，会栈溢出
3.防栈溢出函数

function cloneLoop(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;
}

4.函数库lodash
该函数库也有提供 _.cloneDeep 用来做 Deep Copy

深拷贝与浅拷贝的区别

浅拷贝—浅拷贝是指复制对象的时候，只对第一层键值对进行独立的复制，如果对象内还有对象，则只能复制嵌套对象的地址。

深拷贝—深拷贝是指复制对象的时候完全的拷贝一份对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。其实只要递归下去，把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。