Javascript 深度克隆中的循环引用问题解决和代码优化

概要
 
在前端项目开发中,我们经常需要深度克隆JS对象。在克隆代码开发过程中,我们经常会遇到数组判定或对象循环引用的问题。
 
本文通过实例来解决上述问题
 
代码及实现
 
常见深度克隆JS对象的代码
 
function deepClone(origin){
 
    if (origin == undefined || typeof origin !== “object”){
 
        return origin;
 
    }
 
    if (origin instanceof Date){
 
        return new Date(origin);
 
    }
 
    let keys = Reflect.ownKeys(origin);
 
    let target = {};
 
    if (Object.prototype.toString.call(origin) === “[object Array]”){
 
        target = [];
 
    }
 
    for(let key of keys){
 
        target[key] = deepClone(origin[key]);
 
    }
 
    return target;
 
 
上述代码主要存在两个问题:
 
数组判定代码过于麻烦
 
对象中如果出现循环引用,代码将会报错。
 
循环引用代码:
 
var obj = {a: 1};
 
obj.obj1 = obj;
 
var newObj = deepClone(obj);
 
console.log(newObj);
 
错误信息:
 
产生错误的原因很简单,由于对象中存在循环引用,所以递归无法结束,最后内存溢出了。
 
循环引用问题的解决
 
由于对象中的循环引用,所以递归无法结束。如果我们记录下哪个对象被克隆了,哪个对象没有被克隆,就可以强制结束递归,避免内存泄漏。
 
我们选择WeekMap来记录对象是否被克隆,主要考虑以下三点:
 
WeakMap对象是key => value形式,不会重复记录
 
WeakMap对象的key必须是一个对象
 
WeakMap是若引用,如果不再使用,内存空间直接释放。
 
改进代码如下:
 
function deepClone(origin, map = new WeakMap()){
 
    if (origin == undefined || typeof origin !== “object”){
 
        return origin;
 
    }
 
    if (origin instanceof Date){
 
        return new Date(origin);
 
    }
 
    if (origin instanceof RegExp){
 
        return new RegExp(origin);
 
    }
 
    var copied = map.get(origin);
 
    if (!!copied){
 
        return copied;
 
    }   
 
    let target = {};
 
    if (Object.prototype.toString.call(origin) === “[object Array]”){
 
        target = [];
 
    }
 
    map.set(origin, target);
 
    let keys = Reflect.ownKeys(origin);
 
    for(let key of keys){   
 
        target[key] = deepClone(origin[key], map);
 
    }
 
    return target;
 
 
通过WeakMap记录对象是否被拷贝过,如果拷贝过,就直接将拷贝过的对象返回,不再重复克隆
 
如果没有被拷贝过,构建数组或普通JS对象,然后再进行记录。
 
克隆存在循环引用的对象,代码如下:
 
var obj = {a: 1};
 
obj.obj1 = obj;
 
var newObj = deepClone(obj);
 
console.log(newObj);
 
执行结果如下:
 
数组判定的代码优化
 
在克隆之前,我们必须知道要克隆的对象是一个普通JS对象还是一个数组。我们是否可以换一个思路,任何对象都有自己的构建器,如果我们直接使用构造器构造对象,也就不需要之前对象是什么类型了。
 
JS中所有对象都有自己的原型链,原型链中包含基类Object的构造器,如下所示:
 
JS普通对象
 
JS数组:
 
JS普通对象的构造方法可以构建出{},JS数组的构建方法可以构造出[]。所以如果我们调用该构造方法,就无需再去判定数组还是普通对象了。
 
改进后的代码如下:
 
function deepClone(origin, map = new WeakMap()){
 
    if (origin == undefined || typeof origin !== “object”){
 
        return origin;
 
    }
 
    if (origin instanceof Date){
 
        return new Date(origin);
 
    }
 
    var copied = map.get(origin);
 
    if (!!copied){
 
        return copied;
 
    }   
 
    let target = new origin.constructor();
 
    map.set(origin, target);
 
    let keys = Reflect.ownKeys(origin);
 
    for(let key of keys){   
 
        target[key] = deepClone(origin[key], map);
 
    }
 
    return target;
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64320.shtml

张贴在3