JavaScript对象魔术

javascript对象魔术

本文探讨JavaScript对象赋值的特性及其潜在问题,并提供解决方案。

对象赋值与引用:

以下代码片段演示了JavaScript对象赋值的机制:

const person = {  firstname: 'ajay',  lastname: 'kumar',  hobbies: ['cricket', 'football']};let employee = person; // 赋值,并非复制employee.hobbies.push('hockey');console.log(person); // 输出修改后的对象console.log(employee); // 输出相同的修改后的对象

employee = person; 这行代码并非创建person对象的副本,而是将employee变量指向了person对象在内存中的同一位置。因此,修改employee对象的属性也会影响person对象。

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

避免对象引用修改的两种方法:

为了避免这种修改原始对象的情况,可以使用以下两种方法创建对象的独立副本:

方法一:使用structuredClone() (推荐)

structuredClone() 方法可以创建对象的深度克隆,包括嵌套对象和数组。

let employee = structuredClone(person);employee.hobbies.push('hockey');console.log(person); // 输出原始对象console.log(employee); // 输出修改后的对象副本

方法二:使用JSON.parse(JSON.stringify(person)) (替代方法)

这种方法将对象转换为JSON字符串,再解析回对象。虽然简单,但它存在一些限制:

无法复制函数和undefined值。可能导致数据丢失,特别是对于包含特殊对象的场景。

let employee = JSON.parse(JSON.stringify(person));employee.hobbies.push('hockey');console.log(person); // 输出原始对象console.log(employee); // 输出修改后的对象副本

总结:

在处理JavaScript对象时,理解赋值与引用的区别至关重要。 structuredClone() 方法是创建深度克隆的首选方法,因为它更可靠且功能更全面。 JSON.parse(JSON.stringify()) 方法则作为一种简便的替代方案,但在使用时需注意其局限性。 选择哪种方法取决于具体的需求和数据的复杂性。

以上就是JavaScript对象魔术的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 23:33:30
下一篇 2025年12月19日 23:33:41

相关推荐

  • 了解Libuv及其线程池

    本文最初发表于我的博客,原文链接如下: 深入理解libuv及其线程池机制 本文将深入探讨libuv库的功能,并重点分析其核心特性之一:线程池。 rahulvijayvergiya.hashnode.dev 即使您对libuv并不熟悉,只要您使用过Node.js,就已经间接受益于它高效的非阻塞I/O处…

    2025年12月19日
    000
  • 在Nodejs的引擎盖下:探索VavaScript引擎

    本文最初发表于我的博客,原文链接如下: 深入V8 JavaScript引擎 V8引擎如何赋予Node.js超高效率?本文将深入探讨V8的内部机制。 rahulvijayvergiya.hashnode.dev V8引擎是JavaScript执行的核心,一个用C++编写的高性能开源JavaScript…

    2025年12月19日
    000
  • BroadcastChannel API:Web开发人员的隐藏宝石

    BroadcastChannel API:Web开发的秘密武器 在快节奏的Web开发领域,我们不断寻找更智能、更高效、更友好的工具。BroadcastChannel API就是这样一款被低估的强大工具,它允许您的Web应用的各个部分(标签页、窗口、iframe和Worker)进行无缝通信,无需复杂的…

    2025年12月19日
    000
  • 第三方图书馆的隐藏成本:当&#don&#t重新发明车轮&#错误

    程序员奉为圭臬的信条之一是“不要重复造轮子”。然而,如同软件开发中的许多绝对性断言一样,实际情况远比这复杂。本文将探讨引入看似便捷的npm包时,其成本可能远高于自行编写代码的情况。 免费代码的陷阱 我们都经历过:需要实现某个功能,恰好有一个npm包能完美胜任。它很流行,维护良好,只需npm inst…

    2025年12月19日
    000
  • 容器安全市场将达到2美元

    全球市场研究机构CrediculousResearch®发布的报告《集装箱安全市场——全球机遇分析与行业预测(2025-2032)》指出,到2032年,集装箱安全市场规模预计将达到127.5亿美元,2025年至2032年的复合年增长率为23.6%。 AI和ML技术在容器安全解决方案中的广泛应用、对云…

    2025年12月19日
    000
  • 最终的Web开发入门工具包

    这份资源合集旨在帮助您快速入门Web开发。它涵盖了学习资源、开发工具、框架库、设计素材、测试调试工具、API集成以及网站分析工具等多个方面。 一、学习资源 资源 说明 W3SchoolsWeb开发初学者友好的教程和参考文档。freeCodeCamp免费的、自定进度的编程教程,适合初学者。Udemy提…

    2025年12月19日
    000
  • 掌握React中的辩论:一种用自定义钩的干净可扩展的方法

    在现代Web开发中,性能优化对于提供流畅、响应迅速的用户体验至关重要。防抖技术是一种有效的优化策略,尤其适用于处理高频用户输入(例如搜索框或表单验证)。本文将介绍如何使用自定义钩子在React中实现防抖功能,提供一个可扩展且可复用的解决方案。 为什么防抖如此重要? 性能优化: 频繁的用户输入可能会导…

    2025年12月19日
    000
  • 使用开放的Web服务发布订阅消息传递

    本文将演示如何利用eyevinn开源云提供的开放式web服务构建一个发布/订阅消息传递(pub/sub)应用程序。pub/sub是一种异步通信模型,是构建可扩展和分布式系统的重要组成部分。我们将使用valkey,一个基于eyevinn开源云的开放式web服务,来实现此功能。 本教程将指导您完成以下步…

    2025年12月19日
    000
  • DeepSeek和Chatgpt可以&#t正确:如何使用元数据更新Cloudflare KV对

    使用cloudflare kv更新键值对及其元数据 本文提供使用Cloudflare KV API更新键值对及其元数据的代码示例。 虽然大型语言模型可以生成代码,但仔细阅读官方文档仍然至关重要。 以下代码片段演示了如何使用fetch API 更新Cloudflare KV中的键值对,同时更新其元数据…

    2025年12月19日
    000
  • 它的未来:自动化和人工智能如何改变发展

    自动化与人工智能:IT领域的未来发展 自动化和人工智能(AI)正在深刻地改变着软件开发和IT专业人员的工作方式。从自动化重复性任务到将AI工具融入开发流程,这些技术为IT行业带来了新的机遇和挑战。 1. DevOps中的自动化:简化开发流程 自动化正在彻底改变开发人员管理开发和部署流程的方式。持续集…

    2025年12月19日
    000
  • 带有开放Web服务的NOSQL键值数据库

    本教程演示如何在eyevinn开源云中利用开放式web服务启动基于apache couchdb的nosql数据库。无需自行管理数据库服务器,即可快速开始数据存储和读取。 步骤: 获取API访问令牌和项目设置: 在Eyevinn开源云网络控制台中,访问“设置/API”页面。 复制令牌,并将其存储在环境…

    2025年12月19日 好文分享
    000
  • 是否可以购买TrustPilot评论?

    提升trustpilot评价,赢得更多客户!本文将探讨购买trustpilot评论的利弊,并介绍如何安全有效地提升您的在线声誉。 Trustpilot评论的重要性 积极的Trustpilot评论对企业至关重要,因为大多数消费者在购买前会参考在线评价。评论直接影响您的业务增长,因为高达92%的消费者会…

    2025年12月19日
    000
  • 我逆转线性&#s同步引擎以查看其工作原理

    我的项目代码已上传至GitHub,欢迎查阅。但如果您想知道我为何启动此项目,请继续阅读。 我从事协作软件开发,专注于富文本编辑器和电子表格。协作引擎(也称数据同步引擎)对于提升这些软件的用户体验至关重要,它支持离线使用、版本历史记录等功能,并允许用户同时编辑同一文件。工程师通常使用操作转换(OT)或…

    2025年12月19日
    000
  • 跨季节发布周

    上周,novu 推出了多项备受期待的功能,显著增强了通知管理的效率和功能性。无论您是专注于优化工作流程、简化开发流程,还是需要动态自定义通知,此次更新都将为您带来诸多便利。 多环境支持 跨环境管理通知可能相当复杂,但对于打造无缝的用户体验至关重要。Novu 的多环境支持提供了一种结构化、安全且高效的…

    2025年12月19日 好文分享
    000
  • 浅副本和深副本

    浅拷贝与深拷贝:JavaScript 对象复制详解 本文深入探讨 javascript 中的浅拷贝和深拷贝,并通过示例代码清晰地展现两者之间的差异。理解这两种拷贝方式对于避免潜在的程序错误至关重要。 1. 浅拷贝 浅拷贝创建一个新对象,但只复制顶层属性。对于嵌套对象或数组,浅拷贝只复制其引用,而非创…

    2025年12月19日
    000
  • JavaScript时间对象,某人构建了一个eactexe,在Google Chrome上更快的网站等等

    JavaScript开发者们,大家好! 欢迎阅读本周的JavaScript新闻! 本周我们将重点关注:Oracle与Deno的商标纠纷、新的JavaScript时间对象获得浏览器支持、Google Chrome的更新以及一些强大的开发者工具。 让我们开始吧! Oracle与Deno的商标之争 Ora…

    2025年12月19日
    000
  • 保持用户的同步:与凸的实时协作

    我的创业公司stick,一款实时协作白板应用,灵感源于线下协作的便捷性。stick的开发过程既富有挑战性,也令人兴奋。在完成项目后,我积累了大量经验,涵盖用户同步、高效数据处理以及系统稳定性保障等方面。 实时协作的必要性 实时协作对现代工作流程至关重要,无论是头脑风暴、文档编辑还是代码调试,即时反馈…

    2025年12月19日
    000
  • 在JS中使用foreach()方法

    JavaScript forEach() 方法是遍历数组元素的高效方式,允许对每个元素执行指定操作,无需创建新的数组副本。这在需要更新变量、打印信息或修改DOM时非常有用。 forEach() 的一个关键特性是它不返回新数组。 forEach() 的优势在于无需索引,简化了数组遍历,使其比传统 fo…

    2025年12月19日
    000
  • js截取字符串方法

    JavaScript提供substring、slice、substr三种截取字符串的方法,其中slice功能更强大,使用更适宜。对于特殊需求的截取,可使用indexOf结合slice查找特定字符位置或使用正则表达式匹配模式。考虑性能优化时,可预先编译正则表达式并避免在循环中重复创建正则表达式对象。同…

    2025年12月19日
    000
  • js如何截取一个字符串

    JavaScript 的字符串截取方法包括:substring、slice 和 substr,各具微妙差异。substring 允许交换参数,slice 返回空字符串而非交换参数,substr 以长度而非结束索引作为参数。应选择符合需求的方法,如 clarity 更好的 slice,或适用于特定情况…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信