JS实现深拷贝的几种方法

这篇具有很好参考价值的文章主要介绍了JS实现深拷贝的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用 JSON 转换

这是最简单的方法。

JSON.parse(JSON.stringify(obj))

二、使用递归

通过递归的方式深度遍历对象,将每个属性的值进行复制。需要处理被复制对象为值类型的情况以及属性值中包含对象的情况。需要注意的是,为了防止循环引用导致死循环,需要记录已经遍历过的对象。

const deepClone = obj => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

三、借助插件

Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

npm i --save lodash
import {cloneDeep} from 'lodash';
const obj1 = {a: {b: 2}};
const obj2 = cloneDeep(obj1);

END文章来源地址https://www.toymoban.com/news/detail-666311.html

到了这里,关于JS实现深拷贝的几种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS数组求和的几种方法

    这篇文章主要介绍了JS数组求和的几种常用方法 方法一:通过原型对象扩展内置对象方法(即给Array增加方法) 方法二:普通for循环函数求和 方法三:使用递归 方法四:函数式编程reduce 拓展:注意reduce()方法的最后一个参数(下面是个特例),避坑!!! 方法五:forEach遍历

    2024年02月01日
    浏览(43)
  • JS debug跳过的几种方法

    第一种反调试解决方法: 禁用断点法 第二种反调试解决方法: 从来不执行法 第三种反调试解决方法: 条件断点法 第四种反调试解决方法:置空函数法 找到这个debug方法名,在控制台重写替换,将其置空。 第五种反调试解决方法:本地替换法 第六种反调试解决方法:ReRes法 谷

    2024年02月16日
    浏览(45)
  • JS里数组合并的几种方法

    JS 中有多种方法可以将多个数组合并成一个数组。 1、使用 Array.prototype.concat() 合并:concat() 方法可以将多个数组合并成一个新数组。 2、使用扩展运算符 (...) 合并:扩展运算符可以将多个数组合并成一个新数组。 3、使用 Array.prototype.push.apply() 合并:push.apply() 方法可以将多个

    2024年02月12日
    浏览(42)
  • JS中跳转传参的几种方法

    在JavaScript中,页面跳转并传递参数主要有以下几种方法: 1. 使用URL的查询字符串 这是最常见的方法,你可以在URL后面添加查询字符串来传递参数。查询字符串以 ? 开始,参数之间用 分隔。 例如: 在接收页面,你可以使用 window.location.search 来获取查询字符串,然后解析它来

    2024年04月26日
    浏览(45)
  • js中断 forEach 循环的几种方法

    1、使用 Array.prototype.some() 方法代替 some() 方法会在找到第一个符合条件的元素时停止循环。 例如: 上述代码会在找到第一个符合条件的元素(即 3)时停止循环。 2、使用 Array.prototype.every() 方法代替 上述代码会在找到第一个符合条件的元素(即 3)时停止循环。 请注意,该

    2024年02月14日
    浏览(41)
  • 前端面试题(第三弹)——js对象的基本方法和深浅拷贝

    第一种 第二种 1.configurable:属性是否可以通过delete删除,默认值为true。 2.enumberable:属性是否可以通过for in 进行循环返回,默认值为true。 3.writable:属性是否可被修改,默认值为true。 4.value:属性实际的值,默认为undefined。 访问器属性有四个属性类型,也是使用Object.defin

    2024年02月13日
    浏览(45)
  • js获取文件名或文件后缀名(扩展名)的几种方法

    有时候我们需要通过含有文件名和后缀名的一个字符串中提取出该文件的文件名或文件后缀名(扩展名),可以通过如下几种方式进行截取。 例如文件名为: var fileName=\\\"12345.txt\\\"; 用法参考博文 【js截取字符串subString()方法】 js截取字符串subString()方法_js 如何使用substring()截取字

    2024年04月16日
    浏览(67)
  • JS实现深拷贝的4种方法

    本文主要给大家介绍了关于JS实现深拷贝的4种方式,深拷贝是指将一个对象完整地拷贝一份,不受原对象影响,文中通过示例代码介绍的非常详细,需要的朋友可以参考下 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象; 浅拷贝:不在堆内存中重新开辟

    2024年02月04日
    浏览(35)
  • vue深拷贝的几种实现方式

    1、通过递归方式实现深拷贝 比较全面的深拷贝,缺点是较为繁琐 2、JSON.parse(JSON.stringify(obj)) 满足一般使用场景,但无法实现对象中方法(function)的深拷贝 3、jQuery的extend方法实现深拷贝 4、Object.assign(obj1, obj2) 只有一级属性为深拷贝,二级属性后就是浅拷贝 5、扩展运算符 只有

    2024年02月09日
    浏览(47)
  • JS常用的几种事件

    JavaScript常用的几种事件有: 点击事件 :当用户点击某个元素时触发,常用于按钮、链接等交互元素。事件名称为\\\"click\\\"。 鼠标移动事件 :当用户将鼠标指针移动到某个元素上时触发,事件名称为\\\"mouseover\\\"。 鼠标离开事件 :当用户将鼠标指针从某个元素上移开时触发,事件名

    2024年01月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包