JavaScript 中的浅复制与深复制

javascript 中的浅复制与深复制

使用 javascript 时,了解浅复制和深复制之间的区别对于有效操作对象和数组至关重要。让我们深入研究这些术语的含义以及如何在代码中实现每种类型的副本。

浅复制
浅拷贝创建一个新的对象或数组,其中包含与原始对象或数组相同的值。但是,如果原始文件包含嵌套对象或数组,则浅拷贝仅复制对这些嵌套结构的引用,而不复制结构本身。这意味着对复制结构中的嵌套对象或数组的更改也会影响原始结构。

浅复制方法示例:

扩展运算符 ({…})

const original = { a: 1, b: { c: 2 } };const shallowcopy = { ...original };

登录后复制

这里,shallowcopy是一个新对象,但是shallowcopy.b仍然引用与original.b相同的对象。

2.object.assign()

const shallowcopy = object.assign({}, original);

登录后复制数组切片方法

const originalarray = [1, 2, 3];const shallowcopyarray = originalarray.slice();

登录后复制

深复制
深层复制创建一个新的对象或数组,它是原始对象或数组的完整、独立的克隆,包括所有嵌套的对象和数组。对深层副本的更改不会影响原始副本,反之亦然。

深复制方法示例:

立即学习“Java免费学习笔记(深入)”;

json.stringify() 和 json.parse()

const original = { a: 1, b: { c: 2 } };const deepcopy = json.parse(json.stringify(original));

登录后复制

该方法将对象序列化为 json 字符串,然后将其解析回新对象。但是,它不处理函数、未定义或循环引用。

2.递归函数

function deepcopy(obj) {  if (obj === null || typeof obj !== 'object') return obj;  const copy = array.isarray(obj) ? [] : {};  for (let key in obj) {    if (obj.hasownproperty(key)) {      copy[key] = deepcopy(obj[key]);    }  }  return copy;}

登录后复制structuredclone()(在现代 javascript 环境中)

const deepCopy = structuredClone(original);

登录后复制

何时使用每个

浅复制:适合没有嵌套结构的简单对象或数组。它更快并且使用更少的内存。当您需要快速复制时使用它,其中对嵌套对象的更改应反映在原始和副本中。

深度复制:对于具有嵌套结构的复杂对象或数组是必需的。它确保对副本的更改不会影响原始版本。当你需要完全独立的克隆时使用它。

了解这些差异有助于防止意外共享引用引起的错误,并确保应用程序中的数据完整性

以上就是JavaScript 中的浅复制与深复制的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2672493.html

(0)
上一篇 2025年3月7日 13:26:51
下一篇 2025年3月7日 07:14:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 将 JSON 导出为 CSV:关于 CSV 和 Unicode 的说明

    有多个JS库允许导出到excel。但是,如果我们想遵循极简主义方法来避免额外的依赖,该怎么办? 最简单的方法是从 JSON 生成 CSV,可以轻松在 Excel 中打开。 但是在展示转换逻辑之前,让我们先了解一下 CSV 是什么以及创建 C…

    2025年3月7日
    200
  • 释放 Convexdev 的潜力:彻底改变后端开发

    在不断发展的软件开发领域,创建强大且可扩展的后端系统始终是一个挑战。从管理数据库到处理实时更新,开发人员经常使用多种工具和框架来构建高效的后端。 Convex.dev 是一个旨在简化和增强后端开发的尖端平台。在本文中,我们将探讨 Conve…

    2025年3月7日
    200
  • 与软件复杂性的永无止境的战斗

    什么是复杂性? 最近读完了《软件设计哲学》,第二章探讨了软件复杂性的话题。  《软件设计哲学》一书实际定义了复杂性: “复杂性是指与软件系统的结构相关的任何使其难以理解和修改的事物。” 换句话说,复杂性可以有多种形式,并且不一定与性能有任何…

    2025年3月7日
    200
  • TypeScript ✔ vs JavaScript ❌:TypeScript 如何胜过 JavaScript

    javascript 多年来一直是 web 开发的基础。它使开发人员能够创建动态和交互式 web 应用程序(显然用于其他目的,但我们将专门讨论 web 开发)。然而,随着应用程序变得越来越复杂,javascript 的局限性变得更加明显。这…

    2025年3月7日
    200
  • Vanilla JS 效果方法

    过去,我经常使用 jquery,我喜欢 jquery 的一点是它通过简单且轻量级的语法提供了许多有用的方法。最常用的 jquery 方法之一是效果方法 – 用于为网站创建动画效果。 例如: 隐藏()/显示()切换()淡入()淡出…

    2025年3月7日
    200
  • 在学习 javascript 的同时编写一个测试函数

    物体无处不在 嗯,您之前可能听说过 javascript 中的对象以及它们对于理解该语言的重要性。 对象因其“key”:“value”模型而使 js 变得非常可读和有用。但我想强调的是,“值”部分不仅接受一个简单的字符串,还接受另一个对象,…

    2025年3月7日
    200
  • React 现代 Web 开发的游戏规则改变者

    介绍 react 是用于构建用户界面的流行 javascript 库,即将在其即将发布的版本 19 中实现巨大飞跃。随着 react 19 的发布,世界各地的开发人员都对新功能和改进感到兴奋,这些新功能和改进有望彻底改变我们构建 web 应…

    2025年3月7日
    200
  • 安全最佳实践

    确保全栈应用程序的安全对于保护用户数据、维护信任和遵守法规至关重要。在本指南中,我们探讨了保护您的应用程序的基本安全最佳实践和技术。 为什么安全很重要 安全漏洞可能会造成严重后果,包括数据盗窃、服务中断和声誉受损。采用强大的安全实践可以降低…

    2025年3月7日
    200
  • 从 Code Monkey 到 DX Champion – 您的一体化开发者体验平台

    在实际编码开始之前,每个开发人员都面临着耗时的设置阶段。作为具有计算机科学背景的开发人员传播者,我介绍了 DronaHQ 如何通过简化设置和改善整体开发人员体验来转变开发流程。 开发人员的困境:从设置到发布 每个开发人员都经历过这样的日子:…

    2025年3月7日
    200
  • npm run dev 报错

    我们在尝试启动 react 应用程序时经常遇到以下错误。 packit-frontend@0.0.0 devvitefile:///home/ariel/desktop/packit/packit-frontend/node_modules…

    2025年3月7日
    200

发表回复

登录后才能评论