JavaScript对象深克隆

本文探讨了JSON序列化与自定义深克隆在JavaScript中的应用及其局限性。JSON.parse()和JSON.stringify()组合用于对象克隆,但存在构造函数丢失、无法克隆函数和特殊对象以及处理循环引用时的限制。为解决这些问题,文章提供了两种自定义深克隆的方法,通过递归实现完整复制对象,包括其属性和复杂结构。这些方法能够更好地处理各种对象类型,确保原型链和特殊对象的正确复制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、JSON序列化与反序列化

        let obj = {
            a:1,
            b:[1,2,3],
            c:{
                name:"Asia"
            }
        }
        
        let obj2 = JSON.parse(JSON.stringify(obj));
        console.log(obj);
        console.log(obj2);

缺点:

  1. 克隆出来的对象的构造函数会指向Object,原型链关系断裂
  2. 无法实现对函数、regExp等特殊对象的克隆
  3. 在存在循环引用的时候会抛出异常

二、自定义深克隆

1、

// 检查类型
let checkType = data => {
    return Object.prototype.toString.call(data).slice(8, -1)
}

let deepClone = target => {
    let targetType = checkType(target)
    let result
    if (targetType === 'Object') {
        result = {}
    } else if (targetType === 'Array') {
        result = []
    } else {
        return target
    }
    for (let i in target) {
        let value = target[i]
        let valueType = checkType(value)
        if (valueType === 'Object' || valueType === 'Array') {
            result[i] = deepClone(value) // 递归
        } else {
            result[i] = value
        }
    }
    return result
}

2、

        let obj = {
            a:11,
            b:[1,2,3],
            c:{
                name:'Asia',
                d:{
                    id:123
                }
            },
            fn:function(){
                return 123;
            }
        }
        
        function deepClone(obj,obj2){
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    if(typeof obj[key] == "object"){
                        obj2[key] = Array.isArray(obj[key]) ? [] : {};
                        deepClone(obj[key],obj2[key]);
                    }else{
                        obj2[key] = obj[key];
                    }
                }
            }
        }
        
        let obj2 = {};
        deepClone(obj,obj2);
        console.log(obj);
        console.log(obj2);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值