递归深拷贝

原创于 2022-07-26 09:33:48 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

前端同时被 3 个专栏收录

41 篇文章

订阅专栏

javascript

29 篇文章

订阅专栏

组件

2 篇文章

订阅专栏

本文探讨了使用JSON.stringify()进行深拷贝时遇到的问题，包括时间类型转换、undefined和Function丢失、NaN和Infinity处理、循环引用错误，并提出了一种递归深拷贝的解决方案。通过示例代码展示了如何实现安全的深拷贝函数，以避免上述问题。

递归深拷贝
使用JSON.stringify()深拷贝的问题
1.对象中有时间类型的时候，序列化之后会变成字符串类型。
2.对象中有undefined和Function类型数据的时候，序列化之后会直接丢失。
3.对象中有NaN、Infinity和-Infinity的时候，序列化之后会显示null。
4.对象循环引用的时候，会直接报错。
5.最后，深拷贝建议使用递归，安全方便。

实现方法

  // 更新博客 todo
  // 递归深拷贝函数
  // 可以全局使用也可以按需加载
  const cloneDeep = (obj = {})=> {
    // 变量制空
    let newObj = null;
    // 判断是否需要继续进行递归
    if(typeof (obj) === 'object' && obj !==null){
      newObj = obj instanceof Array ? []:{};
      // 进行下一层递归克隆
      for(let i in obj){
        newObj[i] = cloneDeep(obj[i]);
      }
    }else{
      // 如果不是对象直接赋值
      newObj = obj;
    }
    return newObj
  }

调用方法

  const newObjs = cloneDeep(newObj);
  newObj.InfinityMax = 20;
  console.log(newObjs);
  console.log(newObj);