”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中的日变量:通过实际示例了解“const”、“let”和“var”。

JavaScript 中的日变量:通过实际示例了解“const”、“let”和“var”。

发布于2024-09-02
浏览:755

Day astering Variables in JavaScript: Understanding `const`, `let`, and `var` with Real-World Examples.

当您使用 JavaScript 时,您首先要学习的事情之一就是如何声明变量。变量就像存储信息的容器,例如数字、文本甚至复杂数据。在 JavaScript 中,声明变量有三种方式:const、let 和 var。其中每一个都有自己的规则和最佳实践,一开始可能会有点令人困惑。在这篇文章中,我们将通过简单的示例对其进行分解,以帮助您了解何时以及如何使用每个示例。

示例代码

我们先看一段简单的代码:

`javascript
const accountId = 14423;
var accountEmail = "[email protected]";
让帐户密码 = "12345";
accountCity = "贾姆谢德布尔";
让账户滚动;

// accountId = 13242; // 不允许 - 将抛出错误

console.table([accountEmail, accountId, accountRoll, accountPassword]);
`

理解常量

我们声明的第一个变量是使用 const 的 accountId。当您想要声明一个其值永远不会改变的变量时,可以使用 const 关键字。一旦将值分配给 const 变量,就无法将其重新分配给其他变量。例如:

const accountId = 14423;
accountId = 13242; // This will throw an error!

在上面的示例中,尝试重新分配 accountId 将导致错误,因为 const 变量在初始分配后是不可变的。

const要点:

  • 无法重新赋值: 一旦将值赋给 const 变量,就无法更改。
  • 块作用域: 变量只能在声明它的块内访问(例如,在 {} 内)。

理解让

接下来,我们使用 let 声明 accountPassword。当您想要声明一个其值稍后可能会更改的变量时,可以使用 let 关键字。与 const 不同,您可以重新分配 let 变量:

let accountPassword = "12345";
accountPassword = "67890"; // This is perfectly fine!

但是,与 const 一样,let 也是块作用域的,这意味着它只能在声明它的块内访问。

let的要点:

  • 可以重新赋值: let 变量被赋值后可以更改它的值。
  • 块作用域: 该变量只能在声明它的块内访问。

理解变量

最后,我们来谈谈 var,这就是我们声明 accountEmail 的方式。 var 是 JavaScript 中声明变量的旧方法。与 let 和 const 相比,它有一些关键区别:

var accountEmail = "[email protected]";
var accountEmail = "[email protected]"; // This is allowed!

如您所见,与 let 和 const 不同,您可以在同一范围内重新声明 var 变量,而不会出现任何错误。这有时会导致错误和意外行为,这就是许多开发人员更喜欢 let 和 const 的原因。

var的要点:

  • 可以重新赋值和重新声明:您可以更改值,甚至重新声明 var 变量。
  • 函数作用域: 与块作用域的 let 和 const 不同,var 是函数作用域的。这意味着它可以在声明它的函数内访问,但不限于块。

快速比较

这里有一个快速比较来总结差异:

{
    var x = 10;
    var x = 20; // Allowed, no error

    let y = 10;
    let y = 20; // Not allowed, will throw a syntax error
}

实际示例:使用console.table

在代码末尾,我们使用 console.table 以简洁的表格格式显示变量的值:

console.table([accountEmail, accountId, accountRoll, accountPassword]);

这会输出一个表,其中包含 accountEmail、accountId、accountRoll 和 accountPassword 的当前值。这是在调试或检查工作时可视化变量的便捷方法。

结论

理解 const、let 和 var 之间的差异对于编写干净、无错误的 JavaScript 代码至关重要。快速回顾一下:

  • 当您希望变量保持常量时,请使用 const。
  • 当你期望变量的值改变时使用let。
  • 避免 var ,除非您有特定原因使用它(由于其函数范围的行为)。

通过掌握这三个关键字,您将能够编写更可靠和可维护的 JavaScript 代码。有关更详细的信息,您可以随时参考 MDN 文档。

编码愉快,下一篇见!

版本声明 本文转载于:https://dev.to/alwaysaman/day-1-mastering-variables-in-javascript-understanding-const-let-and-var-with-real-world-examples-nlp?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Floyd 算法如何检测链表中的循环?
    Floyd 算法如何检测链表中的循环?
    使用 Floyd 算法检测链表中的循环确定给定链表是否包含循环在 Java 编程中是一项具有挑战性的任务。当列表中的最后一个节点引用前一个节点而不是空引用时,就会发生循环。为了有效地检测循环,开发人员通常采用 Floyd 的循环查找算法,也称为龟兔赛跑算法。该算法使用两个引用,一个慢速引用和一个快速...
    编程 发布于2024-11-07
  • 如何在不使用 Flash 的情况下使用 JavaScript 在客户端调整图像大小?
    如何在不使用 Flash 的情况下使用 JavaScript 在客户端调整图像大小?
    使用 JavaScript 在客户端调整图像大小:开源解决方案在当今的 Web 开发环境中,通常需要在客户端调整图像大小之前将它们上传到服务器。这种方法可以优化图像质量,减少服务器负载,并通过加快页面加载时间来改善用户体验。虽然 Flash 是调整图像大小的常见选项,但许多开发人员宁愿避免使用它。幸...
    编程 发布于2024-11-07
  • 通信:数据获取模式
    通信:数据获取模式
    重大公告! 我开始了我日常的前端系统设计学习之旅。我将在博客中分享每个模块的见解。所以,这就是开始,还有更多精彩! 在本博客中,我们将探讨前端系统设计所必需的不同数据获取机制,包括短轮询、长轮询、WebSocket、服务器发送事件 (SSE) 和 Webhooks。每种技术都满足向客户端和服务器传输...
    编程 发布于2024-11-07
  • #daysofMiva 编码挑战日:将 JavaScript 链接到 HTML 文件。
    #daysofMiva 编码挑战日:将 JavaScript 链接到 HTML 文件。
    嗨,大家好。很抱歉这篇文章迟发了,但迟发总比不发好?无论如何,让我们深入了解今天的文章。 为什么将 Javascript 链接到 HTML 文件。 JavaScript 是一种在浏览器中运行的编程语言,可以操纵网页的内容、结构和样式。通过将 JavaScript 文件链接到 HTML...
    编程 发布于2024-11-07
  • 为什么我的 canvas.toDataURL() 没有保存我的图像?
    为什么我的 canvas.toDataURL() 没有保存我的图像?
    Resolving Image Saving Issues with canvas.toDataURL()When attempting to utilize canvas.toDataURL() to save a canvas as an image, you may encounter dif...
    编程 发布于2024-11-07
  • Node.js 中的新增功能
    Node.js 中的新增功能
    TL;DR: 让我们探索 Node.js 22 的主要功能,包括 ECMAScript 模块支持和 V8 引擎更新。此版本引入了 Maglev 编译器和内置 WebSocket 客户端,以增强性能和实时通信。还涵盖了测试、调试和文件系统管理方面的改进。 Node.js 22 将于 10 月进入 LT...
    编程 发布于2024-11-07
  • 了解 MongoDB 的distinct() 操作:实用指南
    了解 MongoDB 的distinct() 操作:实用指南
    MongoDB 的distinct() 操作是一个强大的工具,用于从集合中的指定字段检索唯一值。本指南将帮助您了解distinct() 的用途、使用它的原因和时间,以及如何在 MongoDB 查询中有效地实现它。 什么是distinct()? distinct() 方法返回集合或集合...
    编程 发布于2024-11-07
  • 为什么 JavaScript 中的“0”在比较中为 False,而在“if”语句中为 True?
    为什么 JavaScript 中的“0”在比较中为 False,而在“if”语句中为 True?
    揭开 JavaScript 的悖论:为什么“0”在比较中为假,但在 If 语句中为假在 JavaScript 中,原语 " 的行为0”给开发者带来了困惑。虽然诸如“==”之类的逻辑运算符将“0”等同于假,但“0”在“if”条件下表现为真。比较悖论代码下面演示了比较悖论:"0&qu...
    编程 发布于2024-11-07
  • GitHub Copilot 有其怪癖
    GitHub Copilot 有其怪癖
    过去 4 个月我一直在将 GitHub Copilot 与我们的生产代码库一起使用,以下是我的一些想法: 好的: 解释复杂代码:它非常适合分解棘手的代码片段或业务逻辑并正确解释它们。 单元测试:非常擅长编写单元测试并快速生成多个基于场景的测试用例。 代码片段:它可以轻松地为通用用例生成有用的代码片段...
    编程 发布于2024-11-07
  • 静态类或实例化类:什么时候应该选择哪个?
    静态类或实例化类:什么时候应该选择哪个?
    在静态类和实例化类之间做出选择:概述在 PHP 中设计软件应用程序时,开发人员经常面临在使用静态类或实例化对象。这个决定可能会对程序的结构、性能和可测试性产生重大影响。何时使用静态类静态类适用于对象不具备静态类的场景独特的数据,只需要访问共享功能。例如,用于将 BB 代码转换为 HTML 的实用程序...
    编程 发布于2024-11-07
  • ⚠️ 在 JavaScript 中使用 `var` 的隐藏危险:为什么是时候继续前进了
    ⚠️ 在 JavaScript 中使用 `var` 的隐藏危险:为什么是时候继续前进了
    关键字 var 多年来一直是 JavaScript 中声明变量的默认方式。但是,它有一些怪癖和陷阱,可能会导致代码出现意外行为。现代替代方案(如 let 和 const)解决了许多此类问题,使它们成为大多数情况下声明变量的首选。 1️⃣ 提升:var 在不知不觉中声明变量! ?解释:...
    编程 发布于2024-11-07
  • PDO::MYSQL_ATTR_INIT_COMMAND 需要“SET CHARACTER SET utf8”吗?
    PDO::MYSQL_ATTR_INIT_COMMAND 需要“SET CHARACTER SET utf8”吗?
    在带有“PDO::MYSQL_ATTR_INIT_COMMAND”的 PDO 中“SET CHARACTER SET utf8”是否必要?在 PHP 和 MySQL 中,“SET NAMES” utf8”和“SET CHARACTER SET utf8”通常在使用 UTF-8 编码时使用。但是,当使...
    编程 发布于2024-11-07
  • 为什么使用Password_Hash函数时哈希值会变化?
    为什么使用Password_Hash函数时哈希值会变化?
    了解Password_Hash函数中不同的哈希值在开发安全认证系统时,开发人员经常会遇到使用password_hash获取不同密码哈希值的困惑功能。为了阐明此行为并确保正确的密码验证,让我们分析此函数背后的机制。密码加盐:有意的功能password_hash 函数有意生成唯一的盐它对每个密码进行哈希...
    编程 发布于2024-11-07
  • 为什么与谷歌竞争并不疯狂
    为什么与谷歌竞争并不疯狂
    大家好,我是 Antonio,Litlyx 的首席执行官,我们的对手是一些巨头! Microsoft Clarity、Google Analytics、MixPanel...它们是分析领域的重要参与者。当人们听说一家初创公司正在与如此知名的公司合作时,他们常常会感到惊讶。但让我们看看为什么与谷歌这样...
    编程 发布于2024-11-07
  • 如何在 Java Streams 中高效地将对象列表转换为可选对象?
    如何在 Java Streams 中高效地将对象列表转换为可选对象?
    使用 Java 8 的可选和 Stream::flatMap 变得简洁使用 Java 8 流时,将 List 转换为可选 并有效地提取第一个 Other 值可能是一个挑战。虽然 flatMap 通常需要返回流,但可选的 Stream() 的缺失使问题变得复杂。Java 16 解决方案Java 16 ...
    编程 发布于2024-11-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3