JS 深度克隆

作者: 太妃榛果拿铁 | 来源:发表于2020-03-04 00:01 被阅读0次

想要克隆一个对象或数组,如果只是普通的赋值,那么只是复制了浅层,深层的引用值其实指向的是同一块内存。

JSON克隆法

第一次看到这种克隆方法,把我惊呆了,还能这样克隆?

function JSONDeepClone(origin) {
    return JSON.parse(JSON.stringify(origin));
}

但这个方法也有缺点,当对象中包含【Function函数、Date日期对象、RegExp正则对象】时,克隆出的对象无法复制这些属性。

递归克隆

再很久以前学基础js的时候,就自己试着写了一下递归深度克隆,能深度克隆数组和对象。

function deepClone(origin) {
    let target;
    // 判断传入的origin的类型
    if (getType(origin) == '[object Object]') {
        target = {};
    }else if (getType(origin) == '[object Array]') {
        target = [];
    }else{
        return origin;
    }
    // 遍历值,for-in可以遍历数组、对象
    for(const key in origin){
        // 如果值是数组或对象,递归继续克隆
        if (getType(origin[key]) == '[object Object]' || getType(origin[key]) == '[object Array]') {
            target[key] = deepClone(origin[key]);
        }
        //如果不是,直接赋值
        else{
            target[key] = origin[key];
        }
    }
    return target;
}

// 判断类型
function getType(sth) {
    return Object.prototype.toString.call(sth);
}

当然,这里还有缺陷。克隆出来的对象,函数、日期对象、正则对象等其实也是同一个引用。

对于解决日期对象,可以使用这种方法(同时在遍历值的时候,是否继续递归克隆的条件判断要多加上Date)

if (getType(origin) == '[object Date]') {
    return new Date(origin.getTime());
}

对于正则也是同样的思路,如果是[object RegExp],就new RegExp,用正则的一些属性获取被克隆的正则对象的信息

相关文章

  • js克隆

    实现 js 深度克隆 执行结果如下:

  • js深度克隆

  • js深度克隆

    在JAVAScript中数据类型分为两种,一种是原始数据类型,另外一种就是引用数据类型。 数据类型 原始数据类型:...

  • JS 深度克隆

    想要克隆一个对象或数组,如果只是普通的赋值,那么只是复制了浅层,深层的引用值其实指向的是同一块内存。 JSON克隆...

  • js对象深度克隆

    通用克隆方法 第一种方法简单粗暴,先将对象序列化再解析回来,不过要注意对象中如果有函数function则不能正确复...

  • JS实现深度克隆

    一、概念 深度克隆:深度克隆的新对象可以完全脱离原对象,我们对新对象的修改不会反映到原对象中 二、知识点储备: 1...

  • JS深度克隆实现

  • js实现深度克隆

    方法一 硬刚法(迭代法,适用于所有) 方法二 利用JSON.stringify 将js对象序列化(JSON字符串)...

  • js 浅拷贝和深拷贝

    js实现深拷贝(深度克隆)[https://www.cnblogs.com/cirry/p/13395291.ht...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

网友评论

    本文标题:JS 深度克隆

    本文链接:https://www.haomeiwen.com/subject/jfirlhtx.html