JS手写实现深拷贝

手写深拷贝

• 一、通过JSON.stringify
• 二、函数库lodash
• 三、递归实现深拷贝
• • 基础递归
  • 升级版递归---解决环引用爆栈问题
  • 最终版递归---解决其余类型拷贝结果

一、通过JSON.stringify

JSON.parse(JSON.stringify(obj))是比较常用的深拷贝方法之一

原理：利用JSON.stringify 将JavaScript对象序列化成为JSON字符串，并将对象里面的内容转换成字符串，再使用JSON.parse来反序列化，将字符串生成一个新的JavaScript对象

这个方法是目前使用最多的深拷贝的方法，也是最简单的方法，使用示例：

let obj1 = {  
  a: 0,
  b: {
    c: 0
  }
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj1.a = 1;
obj1.b.c = 1;
console.log(obj1); // {a: 1, b: {c: 1}}
console.log(obj2); // {a: 0, b: {c: 0}}

这个方法虽然简单粗暴，但也存在一些问题，在使用该方法时需要注意：

拷贝的对象中如果有 function、undefined、symbol，当使用过JSON.stringify()进行处理之后，都会消失。

const originObj = {
    name: 'test',
    age: undefined,
    func: function () {
        console.log('Hello World');
    },
    key: Symbol('一个独一无二的key')
}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // 只剩下 {name: "test"}

• 无法拷贝不可枚举的属性；
• 无法拷贝对象的原型链；
• 拷贝 Date 引用类型会变成字符串；
• 拷贝 RegExp 引用类型会变成空对象；
• 对象中含有NaN、Infinity以及 -Infinity，JSON 序列化的结果会变成null；
• 无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

二、函数库lodash

该函数库也有提供_.cloneDeep用来做深拷贝，可以直接引入并使用：

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f); // false

三、递归实现深拷贝

实现深拷贝的思路就是，使用for in来遍历传入参数的属性值

• 如果值是基本类型就直接复制
• 如果是引用类型就进行递归调用该函数

基础递归

function deepClone (source) {
    //判断source是不是对象
    if (source instanceof Object === false) return source;
​
    //根据source类型初始化结果变量
    let target = Array.isArray(source) ? [] : {};
​
    for (let i in source) {
        // 判断是否是自身属性
        if (source.hasOwnProperty(i)) {
            //判断数据i的类型
            if (typeof source[i] === 'object') {
                target[i] = deepClone(source[i]);
            } else {
                target[i] = source[i];
            }
        }
    }
    return target;
}
​
const obj = {
    info: { c: { d: 1 } },
    age: undefined,
    func: function () {
        console.log('Hello World');
    },
    key: Symbol('一个独一无二的key')
}
​
const resultA = deepClone(obj)
​
obj.info.c.d = 3
console.log(111111, obj); 
// { info: { c: { d: 3 } }, age: undefined, func: f, key: xxxxx}
​
console.log(222222, resultA); 
// { info: { c: { d: 1 } }, age: undefined, func: f, key: xxxxx}
​
​
let resultB = [1, [2, 3], [4, [5]]]
let resultC = deepClone(resultB)
​
resultB[1][1] = 7
console.log(333333, resultB);  // [1, [2, 7], [4, [5]]]
​
console.log(444444, resultC);  // [1, [2, 3], [4, [5]]]

这只是粗略的版本，这样虽然实现了深拷贝，但也存在一些问题：

• 存在环引用问题（存在循环引用，拷贝会直接爆栈）
  
• 对于Date、RegExp、Set、Map等引用类型不能正确拷贝

升级版递归---解决环引用爆栈问题

function deepClone (source, map = new Map()) {
    //判断source是不是对象
    if (source instanceof Object === false) return source;
​
    //根据source类型初始化结果变量
    let target = Array.isArray(source) ? [] : {};
​
    /* ----------------新增---------------- */
    if (map.get(source)) {
        // 已存在则直接返回
        return map.get(source)
    }
    // 不存在则第一次设置
    map.set(source, target)
    /* ----------------新增---------------- */
​
    for (let i in source) {
        // 判断是否是自身属性
        if (source.hasOwnProperty(i)) {
            //判断数据i的类型
            if (typeof source[i] === 'object') {
                // 传递map
                target[i] = deepClone(source[i], map);
            } else {
                target[i] = source[i];
            }
        }
    }
    return target;
}
​
const obj = {
    info: { c: { d: 1 } },
    age: undefined,
    func: function () {
        console.log('Hello World')
    },
    key: Symbol('一个独一无二的key'),
}
​
// 形成环引用
obj.loop = obj
console.log(obj);
​
const resultA = deepClone(obj)
console.log(resultA); // 拷贝成功

最终版递归---解决其余类型拷贝结果

// 可遍历类型
const arrTag = '[object Array]';
const objTag = '[object Object]';
const mapTag = '[object Map]';
const setTag = '[object Set]';
const argTag = '[object Arguments]';
const strTag = '[object String]';
​
// 不可遍历类型
const boolTag = '[object Boolean]';
const numTag = '[object Number]';
const dateTag = '[object Date]';
const errTag = '[object Error]';
const regexpTag = '[object RegExp]';
const symbolTag = '[object Symbol]';
const funTag = '[object Function]';
​
// 将可遍历类型做个集合
const traversalArr = [arrTag, objTag, mapTag, setTag, argTag, strTag];
​
​
// 判断类型的函数(采用最全且无遗漏的判断方式)
function checkType (source) {
    return Object.prototype.toString.call(source)
}
​
// 拷贝RegExp的方法
function cloneReg (source) {
    const reFlags = /\w*$/;
    const result = new source.constructor(source.source, reFlags.exec(source));
    result.lastIndex = source.lastIndex;
    return result;
}
​
// 拷贝Date的方法
function cloneDate (source) {
    return new source.constructor(source.valueOf())
}
​
​
function deepClone (source, map = new Map()) {
    // 非对象直接返回
    if (source instanceof Object === false) return source
​
    // 根据source类型初始化结果变量
    let target = Array.isArray(source) ? [] : {};
​
​
    /* ----------------处理环引用问题---------------- */
    // 已存在则直接返回(仅仅在环引用之间生效)
    if (map.get(source)) return map.get(source)
​
    // 不存在则第一次设置
    map.set(source, target)
    /* ----------------处理环引用问题---------------- */
​
​
    /* ----------------处理Map、Set、Date、RegExp深拷贝失效问题---------------- */
    const type = checkType(source)
​
    console.log(type);
    let emptyObj
​
    // 如果是可遍历类型，直接创建空对象
    if (traversalArr.includes(type)) {
        emptyObj = new source.constructor()
    }
​
    // 处理Map类型
    if (type === mapTag) {
        source.forEach((value, key) => {
            emptyObj.set(key, deepClone(value, map))
        })
        return emptyObj
    }
​
    // 处理Set类型
    if (type === setTag) {
        source.forEach(value => {
            emptyObj.add(deepClone(value, map))
        })
        return emptyObj
    }
​
    // 处理Date类型
    if (type === dateTag) return cloneDate(source)
​
    // 处理Reg类型
    if (type === regexpTag) return cloneReg(source)
    /* ----------------处理Map、Set、Date、RegExp深拷贝失效问题--------------- */
​
​
    for (let item in source) {
        // 判断是否是自身属性
        if (source.hasOwnProperty(item)) {
            // 判断数据i的类型
            // if (source[item] instanceof Object) {
            if (typeof source[item] === 'obejct') {
                target[item] = deepClone(source[item], map);
            } else {
                target[item] = source[item];
            }
        }
    }
    return target;
}
​
const obj = {
    // 基本类型
    str: 'test',
    num: 18,
    boolean: true,
    sym: Symbol('独一无二key'),
​
    // 引用类型(以下8种数据对象均需进行真正意义上的深拷贝)
    obj_object: { name: 'squirrel' },
    arr: [123, '456'],
    func: (name, age) => console.log(`姓名：${name}，年龄：${age}岁`),
​
    map: new Map([['t', 100], ['s', 200]]),
    set: new Set([1, 2, 3]),
    date: new Date(),
    reg: new RegExp(/test/g),
}
​
// 形成环引用
obj.loop = obj
​
const result = deepClone(obj)
console.log('手写deepClone结果:', result)

结果如下（完美解决了基础递归中的问题）：