如何实现一个完整的深拷贝

r囧r小猫 2023-08-17 16:47 157阅读 0赞

### 浅拷贝和深拷贝 ###

**浅拷贝**：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

**深拷贝**：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70 1][]

### 实现 ###

**1.第三方库（0分）**

Lodash，如果是在工作中使用完全可以，但是毕竟还是需要发扬程序员刨根问底的精神，彻底搞明白其中原理。

**2.简易版（乞丐版）**

const newObj = JSON.parse(JSON.stringify(oldObj));

无法实现对函数 、RegExp等特殊对象的clone；对象有循环引用,会报错；会抛弃对象的constructor,所有的构造函数会指向Object

**3.进阶版：**通过递归来处理不确定深度的object（包括数组）

**4.加强版**

解决循环引用问题，额外开辟一个存储空间，选择map数据结构来存储当前对象和拷贝对象的对应关系，当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝，这样就巧妙化解的循环引用的问题。

**5.究极版**

//可继续遍历的数据类型
    const mapTag = '[object Map]';
    const setTag = '[object Set]';
    const arrayTag = '[object Array]';
    const objectTag = '[object Object]';
    const argsTag = '[object Arguments]';
    //不可继续遍历的数据类型
    const boolTag = '[object Boolean]';
    const dateTag = '[object Date]';
    const numberTag = '[object Number]';
    const stringTag = '[object String]';
    const symbolTag = '[object Symbol]';
    const errorTag = '[object Error]';
    const regexpTag = '[object RegExp]';
    const funcTag = '[object Function]';
    
    const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];
    
    //工具函数 用性能较高的while循环
    function forEach(array, iteratee) {
        let index = -1;
        const length = array.length;
        while (++index < length) {
            iteratee(array[index], index);
        }
        return array;
    }
    // 判断是否为引用类型
    function isObject(target) {
        const type = typeof target;
        return target !== null && (type === 'object' || type === 'function');
    }
    // 获取类型
    function getType(target) {
        return Object.prototype.toString.call(target);
    }
    // 初始化被克隆对象
    function getInit(target) {
        const Ctor = target.constructor;
        return new Ctor();
    }
    // 拷贝symbol类型
    function cloneSymbol(targe) {
        return Object(Symbol.prototype.valueOf.call(targe));
    }
    // 拷贝正则
    function cloneReg(targe) {
        const reFlags = /\w*$/;
        const result = new targe.constructor(targe.source, reFlags.exec(targe));
        result.lastIndex = targe.lastIndex;
        return result;
    }
    
    function cloneFunction(func) {
        const bodyReg = /(?<={)(.|\n)+(?=})/m;
        const paramReg = /(?<=$).+(?=$\s+{)/;
        const funcString = func.toString();
        if (func.prototype) {
            const param = paramReg.exec(funcString);
            const body = bodyReg.exec(funcString);
            if (body) {
                if (param) {
                    const paramArr = param[0].split(',');
                    return new Function(...paramArr, body[0]);
                } else {
                    return new Function(body[0]);
                }
            } else {
                return null;
            }
        } else {
            return eval(funcString);
        }
    }
    // 拷贝不可遍历类型
    function cloneOtherType(targe, type) {
        const Ctor = targe.constructor;
        switch (type) {
            case boolTag:
            case numberTag:
            case stringTag:
            case errorTag:
            case dateTag:
                return new Ctor(targe);
            case regexpTag:
                return cloneReg(targe);
            case symbolTag:
                return cloneSymbol(targe);
            case funcTag:
                return cloneFunction(targe);
            default:
                return null;
        }
    }
    
    function deepclone(target, map = new WeakMap()) {
    
        // 克隆原始类型
        if (!isObject(target)) {
            return target;
        }
    
        // 初始化
        const type = getType(target);
        let cloneTarget;
        if (deepTag.includes(type)) {
            cloneTarget = getInit(target, type);
        } else {
            return cloneOtherType(target, type);
        }
    
        // 防止循环引用
        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);
    
        // 克隆set
        if (type === setTag) {
            target.forEach(value => {
                cloneTarget.add(clone(value, map));
            });
            return cloneTarget;
        }
    
        // 克隆map
        if (type === mapTag) {
            target.forEach((value, key) => {
                cloneTarget.set(key, clone(value, map));
            });
            return cloneTarget;
        }
    
        // 克隆对象和数组
        const keys = type === arrayTag ? undefined : Object.keys(target);
        forEach(keys || target, (value, key) => {
            if (keys) {
                key = value;
            }
            cloneTarget[key] = clone(target[key], map);
        });
    
        return cloneTarget;
    }
    
    module.exports = {
      deepclone
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: /images/20230809/0e6db6eb9858434ebf702327c41eae4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70 1]: /images/20230809/df51be44f2014c9e8521678227ee3887.png