自己写深拷贝

干前端的小阳哥

于 2023-03-06 15:26:11 发布

阅读量118

点赞数

文章标签： json javascript 前端

本文链接：https://blog.csdn.net/weixin_48447589/article/details/129363290

版权

文章探讨了使用JSON.stringify和JSON.parse进行深拷贝的局限性，包括丢失undefined、函数、日期、正则表达式和NaN等类型，以及处理循环引用的问题。然后介绍了通过递归函数实现的深拷贝方法，以克服上述限制。

摘要由CSDN通过智能技术生成

一、深拷贝

JSON.stringfy() 将对象序列化成json对象
JSON.parse() 反序列化——将json对象反序列化成js对象

这个深拷贝是有弊端的（直接上代码）

let copyObj = JSON.parse(JSON.stringify(obj))
    copyObj.a = 2
    console.log(obj, copyObj)

最基础的深拷贝，这样就成功了！

但是会有问题，什么问题呢？

let obj = {
        a:undefined,
        b:{
            c: function() {
                console.log(1)
            },
            d: null,
            e: new Date(),
            f: new RegExp('\\w+'),
            g: NaN
        },
    }

    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(obj, copyObj)

1.原对象中的a、c不见了，undefined、function类型的key会丢失
2.e时间对象，会变成字符串形式
3.RegExp定义的属性会变成 {}
4.NaN 类型会变成 null
还有一个问题： 循环引用

let obj = {
        a:1,
    }
    obj.c = obj
    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(obj, copyObj)

5.无法处理循环引用的问题
结论：这种拷贝方式局限性比较大，但是在日常开发中一般只是拷贝基本的数据类型，个人在开发中用的还是比较多

二、自己写递归实现深拷贝

function deepCopy(source){
  //json对象 数组 其他类型
  if(Array.isArray(source)){
    let arr = [];
    source.forEach(item=>{
      if(typeof item === 'object'){
        arr.push(deepCopy(item));
      }else{
        arr.push(item);
      }
    })
    return arr;
  }else if(isJson(source)){
    let json = {};
    Object.keys(source).forEach(keyName=>{
      const val = source[keyName];
      if(typeof val === 'object'){
        json[keyName] = deepCopy(val);
      }else{
        json[keyName] = val;
      }
    })

    return json ;
  }else{
    return source;
  }
}

这样就实现了深拷贝！

参考连接：(159条消息) JS实现深拷贝的三种方式_js深拷贝_Make Life Getting Better的博客-CSDN博客