专栏首页杰的记事本JS深拷贝几种实现方法

JS深拷贝几种实现方法

1、使用递归(循环)的方式实现深拷贝

//使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    var objClone = Array.isArray(obj) ? [] : {};
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
     return objClone;
  }
  return obj;
}

2、lodash函数库实现深拷贝

lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝

3、通过 JSON 对象实现深拷贝

//通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

4、Object.assign()拷贝(并不深,一级拷贝)

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Rust日报】 2019-08-12 - 哪些软件应用值得用Rust重写?

    Rust安全、高性能等优点吸引到很多优秀的开发者和公司将原有项目的部分或全部用它重写,下面是知乎上关于该问题的回答,如果你有重写的经验和想法,欢迎分享。

    MikeLoveRust
  • [译] 避免那些可恶的cannot read property of undefined 错误

    Uncaught TypeError: Cannot read property 'foo' of undefined. 是一个我们在 JavaScript 开...

    ConardLi
  • 前端语言基础【第二篇:JavaScript】

    在js里面需要获取到input里面的值,如果把script标签放到head 里面会出现问题。

    BWH_Steven
  • 10分钟,用TensorFlow.js库,训练一个没有感情的“剪刀石头布”识别器

    “剪刀石头布”是我们小时候经常玩的游戏,日常生活中做一些纠结的决策,有时候也常常使用这种规则得出最后的选择,我们人眼能很轻松地认知这些手势,“石头”呈握拳状,“...

    大数据文摘
  • Java8 CompletableFuture 编程

     所谓异步调用其实就是实现一个无需等待被调用函数的返回值而让操作继续运行的方法。在 Java 语言中,简单的讲就是另启一个线程来完成调用中的部分计算,使调用继续...

    JMCui
  • JavaScript中科学计数法的问题

    JavaScript 中经常会碰到数值计算问题,偶尔会在不经意间报一个不是bug的bug。今天来说说一个特殊的例子。我以0.0011BTC 价格买入 0.000...

    用户2192970
  • 56 道高频 JavaScript 与 ES6+ 的面试题及答案

    用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为 9 - 20

    夜尽天明
  • 微信小程序知识云开发

    小程序界面设计、交互、功能与他人的手机应用软件或在先发布的小程序构成实质性相似,构成小程序抄袭

    达达前端
  • 【Rust日报】 2019-08-16 - Rust如何走进Facebook

    Chaos: 今天刚看到Facebook内部meetup流出的Slides,原文标题很有意思:Bringing Rust Home to Meet the Pa...

    MikeLoveRust
  • 「React Hook」160行代码实现动态炫酷的可视化图表 - 排行榜

    这是一个国外大佬在其公司峰会的代码竞赛中写的一个库:react-dynamic-charts,用于根据动态数据创建动态图表可视化。

    前端劝退师

扫码关注云+社区

领取腾讯云代金券