JavaScript对象深克隆

原创已于 2022-06-26 16:36:28 修改 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-06-22 10:00:09 首次发布

JavaScript学习笔记同时被 2 个专栏收录

32 篇文章

订阅专栏

ECMAScript

8 篇文章

订阅专栏

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

一、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);

缺点：

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

二、自定义深克隆

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);