JavaScript 变量:理解基元和引用类型

javascript 变量:理解基元和引用类型

两种基本类型的数据存储在 javascript 中的变量中:基元引用类型。了解这两种类型之间的区别对于内存管理以及调节数据的共享、存储和更改至关重要。本文深入探讨了它们之间的区别,提供了现实世界的示例,并研究了有效处理这两种类型的方法。

1.基元与引用类型

原语

最简单的数据类型称为基元。它们直接将不可更改的数据存储在变量中。 javascript 支持的基本类型如下:

字符串:“你好”数量:42布尔值:真或假空未定义符号bigint

主要特征:

不可变:它们的值不能直接改变。按值存储

参考类型

另一方面,引用类型存储对象的内存位置。变量不是存储实际值,而是保存对内存地址的引用。示例包括:

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

对象:{名称:’爱丽丝’}数组:[1,2,3]函数: function() { console.log(‘hello’); }日期:新日期()

主要特征:

可变:它们的内容可以修改。存储通过引用

2.实际操作中的基元和引用类型

// primitive examplelet a = 10;let b = a;b = 20;console.log(a); // output: 10// reference examplelet obj1 = { name: 'alice' };let obj2 = obj1;obj2.name = 'bob';console.log(obj1.name); // output: 'bob'

说明

原语:将 a 分配给 b 会创建该值的副本。更改 b 不会影响 a,因为它们是独立的。引用类型:obj1和obj2都指向相同的内存位置。通过 obj2 更改内容也会更新 obj1。

3.可视化概念

基元:将每个变量想象成它自己的包含值的框。复制会创建一个具有独立值的新框。引用类型:将变量视为指向共享容器的标签。引用同一容器的所有标签都会受到其内容更改的影响。

4.变异与赋值

理解变异赋值之间的区别是使用引用类型时的关键。

突变:修改现有对象的内容。

let arr = [1, 2, 3];let arr2 = arr;arr2.push(4);console.log(arr); // output: [1, 2, 3, 4]

赋值:更改对新对象的引用。

let arr = [1, 2, 3];let arr2 = arr;arr2 = [4, 5, 6];console.log(arr); // output: [1, 2, 3]

5.复制对象和数组

浅复制

要创建对象或数组的单独副本,请使用扩展运算符 (…) 或 object.assign()。

let original = { name: 'alice' };let copy = { ...original };copy.name = 'bob';console.log(original.name); // output: 'alice'

深复制

对于嵌套对象,需要深拷贝。一种常见的方法是使用 json.parse(json.stringify()).

let nested = { person: { name: 'alice' } };let deepcopy = json.parse(json.stringify(nested));deepcopy.person.name = 'bob';console.log(nested.person.name); // output: 'alice'

6.按值传递与按引用传递

原语(按值传递)

将基元传递给函数时,会传递值的副本。

function modifyvalue(x) {  x = 20;}let num = 10;modifyvalue(num);console.log(num); // output: 10

引用类型(通过引用传递)

传递引用类型时,会传递对内存位置的引用。

function modifyobject(obj) {  obj.name = 'bob';}let person = { name: 'alice' };modifyobject(person);console.log(person.name); // output: 'bob'

7.原始包装类型

即使原语是不可变的,javascript 也会暂时将它们包装在对象中以允许访问方法和属性。

let str = 'hello';console.log(str.length); // output: 5

说明

字符串原语“hello”临时包装在 string 对象中以访问 length 属性。包装在操作后被丢弃。

8.最佳实践

使用 const 作为引用类型: 使用 const 声明对象和数组可以防止重新分配,但允许内容发生变化。

   const obj = { name: 'Alice' };   obj.name = 'Bob'; // Allowed   obj = { age: 25 }; // Error: Assignment to constant variable.

避免意外突变
如果您需要独立副本,请确保使用扩展运算符或深度复制技术创建一个副本。

知道何时使用深层副本
对于浅层对象,扩展运算符就足够了,但嵌套结构需要深层复制以避免引用问题。

利用不变性
使用 immutable.js 等库或采用函数式编程技术来最大限度地减少意外突变引起的错误。

9.常见陷阱

混淆赋值与变异
请注意您是在修改对象还是重新分配引用。

修改共享引用:
如果程序的其他部分也使用共享对象,则对共享对象的更改可能会产生意想不到的后果。

假设所有副本都是独立的
请记住,浅拷贝并不能防止嵌套结构发生变化。

结论

javascript 的核心思想之一是基元引用类型之间的区别。它会影响您向函数发送数据、管理变量以及防止代码中出现意外副作用的方式。通过掌握这些想法并使用最佳实践,您可以构建更可靠和可维护的 javascript 代码。

关注我:github linkedin

以上就是JavaScript 变量:理解基元和引用类型的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:09:55
下一篇 2025年12月19日 20:10:14

相关推荐

  • 具有默认响应式导航栏的 React/Tailwind 模板

    我只是对排除 App.test.js 和所有那些我不会在 React 项目中使用的默认文件感到恼火,而且除了来自 Tailwind UI 网站的免费版本的导航栏之外,我从未找到过好的导航栏,这不是我见过的最好的导航栏。考虑到这一点,我从头开始为任何 React 项目创建了一个模板。我删除了所有不必要…

    2025年12月19日
    000
  • Svelte 5 中的异步获取

    当你想在 svelte 中获取某些内容时,推荐的方法是将其放入 load 函数中。 我写了一篇关于异步获取的文章以及为什么这对于加载函数之外的工作很重要。 一般来说,当不涉及ssr时,您可以更好地控制竞争条件、错误处理和加载函数之外的实现。虽然我同意在大多数情况下您应该使用加载函数(使用 svelt…

    2025年12月19日
    000
  • GitHub 本身是开源项目吗?

    GitHub 站点本身是开源的吗? 想知道 GitHub 本身是否为开源项目?答案是: 否,Github 站点本身是闭源的 尽管 GitHub 是一个托管开源项目的平台,但它本身并不是一个开源项目。该平台由 Microsoft 拥有和维护,其代码库对公众不可用。闭源软件通常是出于安全考虑或商业利益而…

    2025年12月19日
    000
  • GitHub 网站本身是开源的吗?

    GitHub 站点的开源状态 有许多开发者好奇 GitHub 站点本身是否开源。 GitHub 站点是开源的吗? 令人惊讶的是,GitHub 站点本身并不是开源的。它是一个闭源项目,这意味着其基础代码、设计和实现细节不向公众公开。 GitHub 团队做出这一决定的原因有很多。首先,闭源允许他们更有效…

    2025年12月19日
    000
  • React 中使用 Promise 时,函数大括号的影响原理是什么?

    react promise 中加/不加函数大括号的影响原理 在 react 中,使用 promise 进行异步操作时,我们经常会遇到在函数前面加上或不加上大括号的情况。这两种写法产生不同的效果,让人迷惑。 问题:有无大括号的区别 下面展示了两种写法的对比: 正确写法(无大括号): get: () =…

    2025年12月19日
    000
  • WebStorm 中 Git 图标消失了怎么办?

    如何在 WebStorm 中找回消失的 Git 图标 WebStorm 是一款流行的 IDE,它通常会在项目的顶部显示一个 Git 图标,用于访问版本控制功能。然而,一些用户遇到过此图标消失的问题。 对于 WebStorm 2024.1.2 版本,可以通过以下步骤找回此图标: 单击菜单栏中的 &#8…

    2025年12月19日
    000
  • 使用 @libs-jd/table-data-kit 轻松构建和比较表数据

    在当今数据驱动的世界中,无论您是处理数据库、csv 文件还是其他结构化数据,有效比较和使用表数据都是一项必备技能。为了简化这一点,我们引入了 @libs-jd/table-data-kit 库,这是一个强大的工具,可以为您的 javascript 和 node.js 项目带来表比较和实用功能。 主要…

    2025年12月19日
    000
  • 理解 JavaScript 数组 map() 方法

    map()简介 map() 方法创建一个新数组,其中填充了对调用数组中每个元素调用所提供函数的结果。它是一种函数式编程技术,允许您将数组的每个元素转换为新元素,从而生成新数组而不修改原始数组。 语法 let newarray = array.map(function callback(current…

    2025年12月19日
    000
  • Webstorm Git 图标不见了怎么办?

    Webstorm Git 图标失踪?轻松找回! 如果你在 Webstorm 中发现项目左侧顶部的 Git 图标消失不见,别担心,找回它很容易。 步骤: 打开 Webstorm 设置:点击顶部菜单中的 “File”,然后选择 “Settings” 或使用…

    2025年12月19日
    000
  • GitHub 上标注需要许可证的非开源代码,获取许可后如何使用?

    非开源代码获取许可后的使用规范 对于 GitHub 上标注为需要许可证的非开源代码,获取许可后使用通常遵循以下步骤: 1. 获取许可证 通过官方网站或联系代码所有者获得许可证。许可证通常包含使用条款和条件。 2. 标注许可证 在使用非开源代码的项目中,必须明确标注所使用的许可证条款。标注可以放在代码…

    2025年12月19日
    000
  • Cypress 与 Selenium:流行测试框架的比较

    Cypress 和 Selenium 是两种最流行的 Web 应用程序测试工具。每个都有其优势和特定的用例,因此根据项目要求、团队技能和测试目标在它们之间进行选择是一个关键决策。本文探讨了 Cypress 与 Selenium 的主要区别、优点和局限性,以帮助您选择适合您的测试需求的工具。 Cypr…

    2025年12月19日
    000
  • 对象属性的点表示法与括号表示法 – 有什么区别?

    点符号 点表示法更简单且更具可读性。它在以下情况下使用: 属性名称是一个有效的标识符(仅包含字母、数字、$或_,并且不以数字开头)。您提前知道属性名称。 例如: const person = { name: ‘alice’, age: 30 };console.log(person.name); /…

    2025年12月19日
    000
  • Express or NestJS? Choosing the Best Framework for Your Backend

    随着 Express.js 和 NestJS 主导 Node.js 生态系统,在这些强大的框架之间进行选择就像解决一个复杂的难题。 虽然 Express.js 因其简单性和灵活性而长期以来一直是首选,但 NestJS 因其结构化的、受 Angular 启发的架构而迅速受到欢迎。但问题是,为您的项目选…

    2025年12月19日
    000
  • 使用企业版代码库:如何合法获取许可证并正确使用?

    授权代码的使用:获得许可后的注意事项 某些代码库在 GitHub 中可能提供不同版本,例如社区版和企业版。企业版通常需要购买许可证,才能使用附加功能。 获取许可后的使用方法 获得许可后,您需要在代码中添加许可证密钥才能使用企业版的功能。具体使用方法因库的不同而异,通常需要遵循以下步骤: 获取许可证密…

    2025年12月19日
    000
  • 使用非开源代码的风险:如何明智选择?

    无授权情况下使用非开源代码 您提到的 GitHub 插件,例如 AG-Grid,提供社区版和企业版,其中企业版需要获取许可证才能使用。尽管这些代码可以直接下载,但直接使用未经授权的代码可能会带来法律后果。 官方许可使用方式 获取许可证后,使用官方代码的正确方法如下: 在代码中注明许可证协议,包括许可…

    2025年12月19日
    000
  • 斯巴达与 Zerops 一起进入新时代

    改变游戏规则的合作伙伴关系 我非常高兴地分享 Spartan 与 Zerops 合作,Zerops 是一个深深植根于 Angular 并致力于加强其生态系统的开发人员优先的云平台。此次合作对于 Spartan 来说是一个巨大的机会,为我们提供了将项目提升到新水平所需的动力和可持续性。 社区发展和可持…

    2025年12月19日
    000
  • 后端开发人员的操作技能

    后端开发是每个应用程序的支柱,负责处理逻辑、管理数据库并确保一切在幕后顺利运行。后端开发人员在使应用程序高效、安全和用户友好方面发挥着关键作用。如果您的目标是在后端开发方面表现出色,那么掌握某些技能至关重要。以下是每个后端开发人员应重点关注的五项技能。 熟练掌握服务器端编程语言理解和掌握服务器端语言…

    2025年12月19日
    000
  • Promise Chaining 和 Aync/await 有什么区别

    今天,我发现自己对这两种处理异步操作的方式之间的差异一无所知,所以我决定阅读和研究写这篇文章 – 作为对自己的提醒,谁知道呢,也可以帮助其他开发人员理解这个差异更好。 当时我或多或少知道如何解释,他们都是做同样的事情,then()带来的是解析后的数据,而resolve和reject则用来…

    2025年12月19日
    000
  • 了解 HTTP 内部服务器错误:原因、解决方案和预防

    HTTP 500 内部服务器错误是访问网站时遇到的常见但令人沮丧的错误。此错误是服务器端问题,这意味着它是由托管网站的 Web 服务器而不是客户端浏览器内的问题引起的。当用户遇到 500 错误时,他们通常会看到一条通用消息,指出“出了问题”,但没有提供具体详细信息。本文将深入探讨 https://k…

    2025年12月19日
    000
  • QA 自动化综合指南:简化质量保证,实现更快、更可靠的软件发布

    质量保证 (QA) 自动化已成为软件开发生命周期中的关键组成部分,使团队能够以更快的速度交付高质量的应用程序。随着软件复杂性的不断增加以及对更短发布周期的需求,手动测试往往无法满足要求。 QA 自动化通过自动化重复测试任务、提高准确性和缩短上市时间来帮助克服这些限制。本文将探讨 QA 自动化的基础知…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信