”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 解锁 JavaScript 的超能力:变量的魔力

解锁 JavaScript 的超能力:变量的魔力

发布于2024-11-06
浏览:723

Unlocking JavaScript Superpowers: The Magic of Variables

从今天开始,我们将发现一个编程的世界。 你拥有超能力的世界。是的,你没看错,超能力。如果不是超能力,那又是什么?使用 JavaScript,您可以让物体飞、移动、消失、改变颜色,并在数英里之外看到您的朋友,而这只是可能的一小部分。是的,一切都在你的屏幕上,但仍然非常令人兴奋。
像任何超级英雄一样,你需要很好地控制和了解自己的力量。为此,让我们从熟悉最基本的构建块——全能的变量开始我们的旅程。
什么是变量?想象一下一个神奇的盒子,您可以在其中放置任何您想要的东西,无论大小!多么了不起的发明,对吧?但问题是:它一次只能容纳一件东西(说实话,不是任何尺寸,但我们现在假装情况并非如此)。
你可以放一支笔、一头大象、一把吉他、一个放着一堆书的书架,甚至一张写有一本小说的纸——任何你想要的东西——但一次只能放一件东西。
我们如何用 JavaScript 创建这样一个盒子?太简单了!

let ourFirstBox

简单的两个字。第一个始终是“let”关键字,第二个是框的名称。您可以将“let”视为一个神奇的关键字,它可以让我们创建一个盒子。名称可以是任何名称,但有一些规则。
有硬性规则(如果你不遵守它们,你的魔法将不起作用)。
以及软规则(主要是最佳实践,整个行业标准化)。
让我们从硬性规则开始:

  1. 如果希望名称由多个单词组成,则不能用空格分隔。
  2. 变量名不能以数字开头。 现在是软规则:
  3. 您应该使用称为驼峰命名法的表示法。第一个字母始终是小写,所有后续单词都以大写字母开头,没有空格。
  4. 变量应该是名词。
  5. 如果你想存储包含多个项目的东西(例如,一袋苹果),你应该使用复数名词,如 bagOfApples。
  6. 避免在变量名称中使用数字。

好的。现在我们有一个盒子。我们如何将任何东西放入其中?让我们看一个例子:

let ourFirstBox;
ourFirstBox = 100;

就这样!您创建一个新行,重复变量的名称,但这次没有神奇的“let”关键字,因为我们只需要它来创建变量。在名称后面放置一个等号,这是赋值运算符。使用 = 符号,我们表示要在变量中放入一些内容,然后在其后面,将要存储的内容放入“盒子”中。
现在,我们有一个存储数字的盒子。目前,它并不像看起来那么有用,但相信我,我们正在慢慢实现这一目标。
我们神奇盒子的另一个特点是你可以随时更换里面的物品。

let ourFirstBox;
ourFirstBox = 100;
ourFirstBox = 200;

现在 ourFirstBox 内的值为 200。
创建变量有两种方法。您可以先定义名称,然后在新行中为其分配值。或者,您可以一次完成所有操作:

let ourFirstBox = 100;

这里我们使用关键字let来定义变量,同时给它赋值。
还有另一种类型的“盒子”。它被称为常量。顾名思义,它是一种无法更改的变量。一旦你给它赋予了一个值,那就是它了——你无法替换它。

const ourFirstConstantBox = 200;

如果我们尝试更改其值,我们将收到错误:

const ourFirstConstantBox = 200;
ourFirstConstantBox = 100; // Error!!!!!

现在您知道如何创建变量了!在下一课中,我们将使用很多变量。

版本声明 本文转载于:https://dev.to/edwardfedoruk/unlocking-javascript-superpowers-the-magic-of-variables-2nga?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 在 React 中构建无限滚动组件
    在 React 中构建无限滚动组件
    介绍 我们在应用程序和网页中看到无限滚动,尤其是希望我们滚动的社交媒体。虽然无意识地滚动不好,但构建自己的无限滚动是很棒的。作为开发人员,我们应该尝试重新创建我们在网上冲浪时看到的组件。它可以挑战您在实现某些组件时了解更多信息并跳出框框进行思考。 此外,如果您希望在应用程序中实现无...
    编程 发布于2024-11-06
  • 在 React 中构建响应式会议图块的动态网格系统
    在 React 中构建响应式会议图块的动态网格系统
    In the era of remote work and virtual meetings, creating a responsive and dynamic grid system for displaying participant video tiles is crucial. Inspi...
    编程 发布于2024-11-06
  • 使用 Spring Boot 和 Spring Cloud 开发微服务
    使用 Spring Boot 和 Spring Cloud 开发微服务
    微服务架构已成为构建可扩展和模块化系统的流行解决方案。通过微服务,您可以将单一应用程序分解为更小的、独立的和专业的服务,这使得系统的维护和发展变得更加容易。在这篇文章中,我们将探讨如何使用 Spring Boot 和 Spring Cloud 创建健壮且高效的微服务。 微服务简介 微服务背后的主要思...
    编程 发布于2024-11-06
  • 克服 PHP DOM XML 解析中的挑战:问题和解决方案
    克服 PHP DOM XML 解析中的挑战:问题和解决方案
    简化 PHP DOM XML 解析:揭开要点当您浏览 PHP DOM 函数的复杂性时,可能会出现某些障碍。为了解决这些挑战,让我们开始了解 DOM 的复杂性,并找出常见问题的解决方案。问题 1:使用 xml:id 驯服 ID当使用 ID 来防止树中出现重复页面时,PHP 的 DOM 遇到了一个难题:...
    编程 发布于2024-11-06
  • 密码重置功能:使用 OTP 重置密码
    密码重置功能:使用 OTP 重置密码
    后端 2. 重置密码 转向下一个 API。 PUT 上 /api/reset-password, req -> otp, email, 新密码, res -> nocontent // controllers/passwordReset.go func ResetP...
    编程 发布于2024-11-06
  • 如何从全局站点包继承 Virtualenv 中的特定包?
    如何从全局站点包继承 Virtualenv 中的特定包?
    从全局站点包继承 Virtualenv 中的特定包为了增强虚拟环境 (virtualenv) 的功能,您可能希望从全局站点继承特定包站点包目录。这种方法允许您有选择地将重要的库合并到您的 virtualenv 中,而无需直接安装它们。继承方法要实现这种继承,请使用以下命令创建一个新的 virtual...
    编程 发布于2024-11-06
  • 如何解决 EF6 中的“找不到 'MySql.Data.MySqlClient\'\”错误?
    如何解决 EF6 中的“找不到 'MySql.Data.MySqlClient\'\”错误?
    MySQL 实体框架的提供程序注册使用 MySQL 和实体框架时,您可能会遇到错误“找不到 Entity Framework 提供程序” 'MySql.Data.MySqlClient' ADO.NET 提供程序。”尽管安装了最新的 MySQL 连接器,您可能仍然会遇到此问题。出现此...
    编程 发布于2024-11-06
  • 如何利用PHP防止邮件传输中的恶意输入?
    如何利用PHP防止邮件传输中的恶意输入?
    保护电子邮件传输的用户输入在 PHP 中,必须在发送电子邮件之前清理用户输入,以防止恶意或有害内容泄露你的系统。考虑下面的简单 PHP 邮件脚本的代码片段:<?php $to = "[email protected]"; $name = $_POST['name']; $m...
    编程 发布于2024-11-06
  • 应用页面开发
    应用页面开发
    Если посмотреть на исходный проект, то можно увидеть, что нам необходимо создать одну главную страницу. Результаты поиска авиабилетов, отелей и туров ...
    编程 发布于2024-11-06
  • Java 应用程序中的“No X11 DISPLAY Variable”错误:如何为 GUI 功能设置 DISPLAY 变量?
    Java 应用程序中的“No X11 DISPLAY Variable”错误:如何为 GUI 功能设置 DISPLAY 变量?
    Java 应用程序中的“No X11 DISPLAY Variable”错误Java 应用程序依赖于 X Window 系统 (X11) 来实现图形用户界面 ( GUI)功能。 “未设置 X11 DISPLAY 变量”错误表示应用程序无法访问 X11 显示环境。要解决此问题,请设置 X11 DISP...
    编程 发布于2024-11-06
  • 破解 HashMap 的基础知识:Java 开发人员的关键概念
    破解 HashMap 的基础知识:Java 开发人员的关键概念
    介绍 了解 HashMap 类对于开发人员来说至关重要,无论是在实际应用程序还是面试中。在这篇文章中,我们将探讨如何在 HashMap 中插入、更新和管理键值对。这些知识也将为我们的下一篇文章奠定基础,我们将深入研究 HashSet 并了解这两个集合之间的关系。 什...
    编程 发布于2024-11-06
  • 如何在 .htaccess 中启用 PHP 错误显示和日志记录?
    如何在 .htaccess 中启用 PHP 错误显示和日志记录?
    通过 .htaccess 解决 PHP 错误显示问题测试网站并遇到问题时,错误显示至关重要。但是,此显示有时可能会被禁用。对于仅有权访问 .htaccess 文件并希望启用错误显示的用户,此问题提供了全面的解决方案。该问题解决了 .htaccess 文件是唯一可访问资源的情况。它建议添加三个 PHP...
    编程 发布于2024-11-06
  • 精选的最佳 React 管理仪表板模板
    精选的最佳 React 管理仪表板模板
    Hi there ?. I'm Syakir, a Front-end engineer. In this page, i curated premium react admin templates from various vendors with top features and design ...
    编程 发布于2024-11-06
  • Gosync.Pool 及其背后的机制
    Gosync.Pool 及其背后的机制
    这是帖子的摘录;完整的帖子可以在这里找到:https://victoriametrics.com/blog/go-sync-pool/ 这篇文章是关于 Go 中处理并发的系列文章的一部分: Gosync.Mutex:正常和饥饿模式 Gosync.WaitGroup 和对齐问题 Gosync.Poo...
    编程 发布于2024-11-06
  • 如何在 PHP 中包含 CSS:详细指南
    如何在 PHP 中包含 CSS:详细指南
    在 PHP 中包含 CSS 文件:综合指南在进行 Web 开发时,将 CSS 样式合并到 PHP 代码中对于管理至关重要您的页面的呈现。然而,众所周知,使用 HTML 代码包含 CSS 文件是标准方法。在本文中,我们将深入研究基于 PHP 的解决方案,帮助您了解如何将 CSS 文件直接导入 PHP ...
    编程 发布于2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3