5.浅拷贝和深拷贝（手写）

浅拷贝和深拷贝（手写）

引用类型直接赋值的问题：

• 直接赋值，两个对象指向同一地址，就会造成引用类型之间互相影响的问题。

const obj = {
  name: 'lin'
}

const newObj = obj
obj.name = 'xxx' // 改变原来的对象

console.log('原来的对象', obj) // {name:'xxx'}
console.log('新的对象', newObj){name:'xxx'}

console.log('两者指向同一地址', obj == newObj)  //true

1. 浅拷贝和深拷贝的区别？

• 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的

• 浅拷贝和深拷贝都复制了值和地址，都是为了解决引用类型赋值后互相影响的问题。

• 但是浅拷贝只进行一层复制，深层次的引用类型还是共享内存地址，原对象和拷贝对象还是会互相影响。

  • 即如果有多层嵌套对象，使用浅拷贝还是会发生值被改变的问题。

• 深拷贝就是无限层级拷贝，深拷贝后的原对象不会和拷贝对象互相影响。

Object.assign()、数组的slice/concat/Array.from，还有 ES6 的拓展运算符 都属于浅拷贝

2.一行代码的深拷贝：JSON.parse(JSON.stringify)：

原理就是用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把JSON字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈。

let arr = [{ a: 1, b: 2 }, { a: 3, b: 4 }];
let newArr2 = JSON.parse(JSON.stringify(arr));
console.log(arr[0]);
newArr2[0].a = 123;
console.log(arr[0])

缺点：

• 拷贝的对象值如果有函数、undefined、symbol这几种类型，经过序列化之后字符串中的键值对会消失。

• 拷贝Date引用类型会变成字符串、RegExp引用类型会变成空对象。

• 无法拷贝不可枚举的属性、无法拷贝对象的原型链。

• 无法拷贝对象的循环引用，即对象成环 (a.b ，b.a) 。

• 对象中含有 NaN 、Infinity 以及 -Infinity ，JSON序列化的结果会变成null。
  但是JSON内部采用递归的方式。数据一旦多，就会有递归爆栈的风险。

• 这种方法虽然可以实现数组或对象深拷贝，但不能处理函数

解决爆栈： cloneForce。感兴趣的小伙伴可以看下这篇文章

3.手写深拷贝：

• 以下类型对象和边界条件没有考虑全，太多了。

    <script>    
        // Map和WaekMap的两点区别：
        // 1. WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名
        // 2. WeakMap的键名所指向的对象，不计入垃圾回收机制
        // 目的：WeakMap结构比Map更加有助于防止内存泄漏，
        // 因为它的键所对应的对象，可能会在将来消失，不用手动删除引用
        
        // 深拷贝(考虑多种边界值)
        myDeepClone = function (target, hash = new WeakMap()) {
            // 直接返回 target为null的情况
            if (target == null) return target;
            // 处理除了null以外的基本数据类型
            // 因为 typeof判断基本数据类型除了null返回 object,其它返回的都是它本身
            // typeof判断引用数据类型除了Function返回其本身,别的都是object
            if (typeof target !== 'object') return target;
            // 处理DOM元素
            if (target instanceof HTMLElement) return target;
            if (target instanceof RegExp) return new RegExp(target);
            if (target instanceof Date) return new Date(target);
            // 避免重复拷贝
            if (hash.get(target)) return hash.get(target);
            // 创建一个新的克隆对象或克隆数组, 
            // [].constructor() === Array
            // new [].constructor() === new Array()
            // const cloneTarget = new target.constructor();
            const cloneTarget = Array.isArray(target) ? [] : {};
            //如果存储空间中没有就存进hash里
            hash.set(target, cloneTarget);
            // Reflect.ownKeys() 返回一个自身的键组成的数组,且用来处理Symbolo作为键名的情况
            Reflect.ownKeys(target).forEach(key => {
                // 递归拷贝每一层
                // console.log('key', key);
                cloneTarget[key] = myDeepClone(target[key], hash);
            })
            return cloneTarget;
        }
        // 测试
        const obj = {
            a: true,
            b: 100,
            c: 'str',
            d: undefined,
            e: null,
            f: Symbol('f'),
            g: {
                g1: {
                    name: 'a'
                } // 深层对象
            },
            h: [], // 数组
            i: new Date(), // Date
            j: /abc/, // 正则
            k: function () { }, // 函数
            l: [document.getElementById('foo')] // 引入 WeakMap 的意义，处理可能被清除的 DOM 元素
        }
        const newObj = myDeepClone(obj)
        newObj.g.g1.name = 'bbb';
        console.log('newobj--------', newObj)
        console.log('obj--------', obj)
    </script>

参考文章：轻松拿下 JS 浅拷贝、深拷贝