当前位置:首页 > 科技  > 软件

如何在JavaScript中复制一个对象?

来源: 责编: 时间:2024-04-11 08:58:22 263观看
导读JavaScript的原始数据类型是不可变的,这意味着一旦创建,它们的值就不能改变。但是,对象和数组是可变的,允许在创建后修改它们的值。实际上,这意味着原始数据是通过值传递的,而对象和数组是通过引用传递的。考虑以下例子:let

JavaScript的原始数据类型是不可变的,这意味着一旦创建,它们的值就不能改变。但是,对象和数组是可变的,允许在创建后修改它们的值。AOd28资讯网——每日最新资讯28at.com

实际上,这意味着原始数据是通过值传递的,而对象和数组是通过引用传递的。考虑以下例子:AOd28资讯网——每日最新资讯28at.com

let str = 'Hello';let copy = str;copy = 'Hi';// str = 'Hello', copy = 'Hi'let obj = { a: 1, b: 2 };let objCopy = obj;objCopy.b = 4;// obj = { a: 1, b: 4}, objCopy = { a: 1, b: 4 }

你可以看到,对象obj是通过引用传递给objCopy的。修改其中一个变量会影响另一个变量,因为它们都引用同一个对象。那我们如何解决这个问题呢?答案是克隆对象。AOd28资讯网——每日最新资讯28at.com

浅复制

使用展开运算符(...)或 Object.assign(),我们可以克隆对象并根据其属性创建一个新对象。AOd28资讯网——每日最新资讯28at.com

const shallowClone = obj => Object.assign({}, obj);let obj = { a: 1, b: 2};let clone = shallowClone(obj);let otherClone = shallowClone(obj);clone.b = 4;otherClone.b = 6;// obj = { a: 1, b: 2}// clone = { a: 1, b: 4 }// otherClone = { a: 1, b: 6 }

这种技术被称为浅复制,因为它适用于外部(浅层)对象,但如果我们有嵌套(深层)对象,则会失败,因为这些对象最终会通过引用传递。这就引出了下一部分。AOd28资讯网——每日最新资讯28at.com

图片图片AOd28资讯网——每日最新资讯28at.com

深复制

为了创建一个对象的深复制,我们需要递归地克隆每一个嵌套对象,复制嵌套对象和数组。AOd28资讯网——每日最新资讯28at.com

网上有一些解决方案使用 JSON.stringify() 和 JSON.parse()。虽然这种方法在某些情况下可能有效,但它包含许多问题和性能问题,因此我建议不要使用它。AOd28资讯网——每日最新资讯28at.com

从边界情况开始,我们需要检查传递的对象是否为空,如果是,则返回 null。否则,我们可以使用 Object.assign() 和一个空对象 ({}) 来创建原始对象的浅复制。AOd28资讯网——每日最新资讯28at.com

然后,我们将使用 Object.keys() 和 Array.prototype.forEach() 来确定需要深复制哪些键值对。如果对象是一个数组,我们将设置克隆对象的长度与原对象相等,并使用 Array.from() 创建一个克隆对象。否则,我们将递归地调用函数,把当前值作为参数传入。AOd28资讯网——每日最新资讯28at.com

深复制专用于简单对象和数组。这意味着它无法处理类实例,函数和其他特殊情况。那么,我们如何处理这些情况呢?JavaScript最近给我们提供了一个新的工具来解决这个问题!AOd28资讯网——每日最新资讯28at.com

使用 structuredClone() 进行深复制

克隆显然是一个很常见也很重要的问题。事实上,JavaScript引入了structuredClone()全局函数,可以用来深度克隆对象。而我们不需要实现复杂的递归函数,只需使用这个函数就可以克隆对象。AOd28资讯网——每日最新资讯28at.com

这种技术可用于数组和对象,代码最少,是JavaScript中克隆对象的推荐方式,因为它性能最佳且最可靠。AOd28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-82737-0.html如何在JavaScript中复制一个对象?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 通过 Atexit 模块让 Python 实现 Golang 的 defer 功能,你学会了吗?

下一篇: 注意:Kafka 的这六个场景会丢失消息!

标签:
  • 热门焦点
  • Mate60手机壳曝光 致敬自己的经典设计

    8月3日消息,今天下午博主数码闲聊站带来了华为Mate60的第三方手机壳图,可以让我们在真机发布之前看看这款华为全新旗舰的大致轮廓。从曝光的图片看,Mate 60背后摄像头面积依然
  • 直屏旗舰来了 iQOO 12和K70 Pro同台竞技

    旗舰机基本上使用的都是双曲面屏幕,这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰,这次,你们等到了。据博主数码闲聊站带来的最新爆料称,Redmi下代旗舰K70 Pro和iQOO 12两款手
  • 线程通讯的三种方法!通俗易懂

    线程通信是指多个线程之间通过某种机制进行协调和交互,例如,线程等待和通知机制就是线程通讯的主要手段之一。 在 Java 中,线程等待和通知的实现手段有以下几种方式:Object 类下
  • K8S | Service服务发现

    一、背景在微服务架构中,这里以开发环境「Dev」为基础来描述,在K8S集群中通常会开放:路由网关、注册中心、配置中心等相关服务,可以被集群外部访问;图片对于测试「Tes」环境或者
  • 如何正确使用:Has和:Nth-Last-Child

    我们可以用CSS检查,以了解一组元素的数量是否小于或等于一个数字。例如,一个拥有三个或更多子项的grid。你可能会想,为什么需要这样做呢?在某些情况下,一个组件或一个布局可能会
  • JVM优化:实战OutOfMemoryError异常

    一、Java堆溢出堆内存中主要存放对象、数组等,只要不断地创建这些对象,并且保证 GC Roots 到对象之间有可达路径来避免垃 圾收集回收机制清除这些对象,当这些对象所占空间超过
  • 一条抖音4亿人围观 ! 这家MCN比无忧传媒还野

    作者:Hiu 来源:互联网品牌官01 擦边少女空降热搜,幕后推手曝光被网友誉为“纯欲天花板”的女网红井川里予,近期因为一组哥特风照片登上热搜,引发了一场互联网世界关于
  • 超级标准版旗舰!iQOO 11S全球首发iQOO超算独显芯片

    上半年已接近尾声,截至目前各大品牌旗下的顶级旗舰都已悉数亮相,而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流,其中就包括全新的iQOO 11S系
  • OPPO K11采用全方位护眼屏:三大护眼能力减轻视觉疲劳

    日前OPPO官方宣布,全新的OPPO K11将于7月25日正式发布,将主打旗舰影像,和同档位竞品相比,其最大的卖点就是将配备索尼IMX890主摄,堪称是2000档位影像表
Top