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

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

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

let ourfirstbox

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

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

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

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!!!!!

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

以上就是解锁 JavaScript 的超能力:变量的魔力的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
了解异步操作并在 JavaScript 中使用 async/await
上一篇 2025年12月19日 13:50:20
Monorepos 与 Nx:为什么您可能希望为所有代码提供一个家
下一篇 2025年12月19日 13:50:35

相关推荐

  • HTML5的WebXR是什么?如何开发VR/AR应用?

    HTML5的WebXR是什么?如何开发VR/AR应用?HTML5的WebXR是什么?如何开发VR/AR应用?HTML5的WebXR是什么?如何开发VR/AR应用?HTML5的WebXR是什么?如何开发VR/AR应用?

    webxr 是一套统一 web 上 vr/ar 开发的 api,其核心在于提供统一接口访问各类设备,并包含 1.xrsystem(入口点)、2.xrsession(活动会话)、3.xrframe(渲染帧)、4.xrreferencespace(坐标系)、5.xrview(渲染视图)、6.xrwebg…

    2025年12月22日 用户投稿
    000
  • HTML的div标签有什么作用?如何正确使用?

    HTML的div标签有什么作用?如何正确使用?HTML的div标签有什么作用?如何正确使用?HTML的div标签有什么作用?如何正确使用?HTML的div标签有什么作用?如何正确使用?

    div标签是html中用于创建区块的无语义容器,主要用于组织和包裹其他元素以方便样式化和脚本操作。1. div的核心作用是作为无语义容器,划分页面逻辑区域,需结合class和id赋予含义;2. 使用div进行布局时通常配合css,早期依赖float和position,现多用flexbox或grid实…

    2025年12月22日 用户投稿
    100
  • JavaScript的toString方法怎么转换数据类型?

    tostring()方法用于将不同数据类型的值转换为字符串表示。1. 数字调用tostring()返回数字字符串,可传入基数进行进制转换;2. 布尔值直接转为”true”或”false”;3. 数组会将其元素依次转为字符串后用逗号连接;4. 普通对象默…

    2025年12月22日
    000
  • 如何为HTML表格添加地图显示?有哪些集成方法?

    如何为HTML表格添加地图显示?有哪些集成方法?如何为HTML表格添加地图显示?有哪些集成方法?如何为HTML表格添加地图显示?有哪些集成方法?如何为HTML表格添加地图显示?有哪些集成方法?

    要为html表格添加地图显示,核心步骤是提取地理位置数据并使用地图api渲染。首先,确保表格中包含经纬度或地址信息;其次,选择google maps或leaflet等地图api;第三,通过javascript遍历表格,提取数据并整理为可用格式;第四,初始化地图并在对应位置添加标记;第五,为标记点添加…

    2025年12月22日 用户投稿
    100
  • HTML的title标签有什么作用?如何动态修改?

    如何动态修改html的title标签?可通过javascript的document.title属性直接设置,如document.title = “新的网页标题”;。在spa中,react使用useeffect监听路由变化并更新标题;vue使用watch监听route.path…

    2025年12月22日
    000
  • HTML5的PWA是什么?如何让网页像App一样运行?

    HTML5的PWA是什么?如何让网页像App一样运行?HTML5的PWA是什么?如何让网页像App一样运行?HTML5的PWA是什么?如何让网页像App一样运行?HTML5的PWA是什么?如何让网页像App一样运行?

    pwa的核心是通过web技术实现类原生app体验。1.必须运行在https环境下确保安全性;2.service worker负责离线缓存、推送通知等功能,需编写脚本处理资源缓存和更新;3.web app manifest提供应用描述信息用于主屏幕添加;4.需在网页中注册service worker完…

    2025年12月22日 用户投稿
    000
  • HTML5的Spellcheck属性怎么用?如何禁用拼写检查?

    HTML5的Spellcheck属性怎么用?如何禁用拼写检查?HTML5的Spellcheck属性怎么用?如何禁用拼写检查?HTML5的Spellcheck属性怎么用?如何禁用拼写检查?HTML5的Spellcheck属性怎么用?如何禁用拼写检查?

    要禁用html5的拼写检查,需在相关元素上设置spellcheck=”false”。html5的spellcheck属性用于控制浏览器是否对用户输入内容进行拼写和语法检查,其值可设为true或false;1. 设置spellcheck=”false”可…

    2025年12月22日 用户投稿
    000
  • HTML复选框有哪些场景?多选处理的6种checkbox用法

    HTML复选框有哪些场景?多选处理的6种checkbox用法HTML复选框有哪些场景?多选处理的6种checkbox用法HTML复选框有哪些场景?多选处理的6种checkbox用法HTML复选框有哪些场景?多选处理的6种checkbox用法

    html复选框常用于表单多选、权限控制、标签选择等场景。1. 使用相同name属性可提交数组数据,未选中则不传递;2. 可添加隐藏输入框确保默认值存在;3. javascript实现全选/反选功能,通过遍历复选框并同步状态;4. 动态创建复选框可通过dom操作实现;5. css美化样式常用隐藏原生复…

    2025年12月22日 用户投稿
    100
  • HTML字符编码怎么设置?解决乱码的3种meta charset方案

    HTML字符编码怎么设置?解决乱码的3种meta charset方案HTML字符编码怎么设置?解决乱码的3种meta charset方案HTML字符编码怎么设置?解决乱码的3种meta charset方案HTML字符编码怎么设置?解决乱码的3种meta charset方案

    html乱码的核心解决方法是统一使用utf-8编码,并通过在html文档的 区域添加来明确告诉浏览器如何解析字符。1. 首选方案是统一使用utf-8编码,它是目前最通用、最推荐的做法,兼容性强,适用于所有语言文字;2. 兼容旧版或特定场景时可使用http-equiv方式声明编码,即,适用于老旧htm…

    2025年12月22日 用户投稿
    100
  • JavaScript的concat方法怎么合并数组?和扩展运算符有什么区别?

    javascript的concat方法和扩展运算符都用于合并数组,但扩展运算符更灵活。1. concat是数组方法,返回新数组且不修改原数组,适合明确构建不可变数据或老旧环境兼容;2. 扩展运算符语法简洁直观,可混合元素并创建浅拷贝,适用于复杂构建场景;3. 两者均为浅拷贝,处理引用类型时需额外实现…

    2025年12月22日
    000
  • HTML列表优化怎么实现?内容排版的5种ul/ol用法

    HTML列表优化怎么实现?内容排版的5种ul/ol用法HTML列表优化怎么实现?内容排版的5种ul/ol用法HTML列表优化怎么实现?内容排版的5种ul/ol用法HTML列表优化怎么实现?内容排版的5种ul/ol用法

    优化html列表的核心在于将其作为结构化内容与用户体验设计的关键工具。首先,正确使用ul和ol标签实现语义化结构,ul用于无序项目如产品优势,ol用于有序步骤如操作指南;其次,通过css自定义样式,包括隐藏默认符号、添加图标、调整排版,甚至构建导航栏或卡片布局;最后,提升可访问性与信息层级,利用嵌套…

    2025年12月22日 用户投稿
    000
  • HTML span标签怎么用?内联文本处理的4种常见场景

    HTML span标签怎么用?内联文本处理的4种常见场景HTML span标签怎么用?内联文本处理的4种常见场景HTML span标签怎么用?内联文本处理的4种常见场景HTML span标签怎么用?内联文本处理的4种常见场景

    span标签的核心作用是提供一个无语义的内联容器,用于精准控制文本样式或实现javascript交互。1. 它作为内联元素,不会独占一行,适合包裹少量文本或内联元素;2. 通过class或id为特定文本添加css样式,如高亮关键词或设计价格展示;3. 用作javascript操作的目标,动态更新页面…

    2025年12月22日 用户投稿
    100
  • 如何为HTML表格添加附件上传功能?有哪些实现方式?

    如何为HTML表格添加附件上传功能?有哪些实现方式?如何为HTML表格添加附件上传功能?有哪些实现方式?如何为HTML表格添加附件上传功能?有哪些实现方式?如何为HTML表格添加附件上传功能?有哪些实现方式?

    为html表格添加附件上传功能,需在单元格内嵌入文件上传控件并处理上传逻辑。1. 使用元素插入到表格的 中实现基础上传界面;2. 通过javascript获取文件并使用formdata对象构建请求体;3. 利用fetch api将文件发送至后端服务器;4. 可通过accept属性限制文件类型、检查文…

    2025年12月22日 用户投稿
    100
  • HTML5的Preload和Prefetch有什么区别?如何优化资源加载?

    HTML5的Preload和Prefetch有什么区别?如何优化资源加载?HTML5的Preload和Prefetch有什么区别?如何优化资源加载?HTML5的Preload和Prefetch有什么区别?如何优化资源加载?HTML5的Preload和Prefetch有什么区别?如何优化资源加载?

    preload用于当前急需资源,prefetch用于未来可能需要的资源。preload优先级高,适用于关键css、js、web字体等渲染阻塞资源,通过提前加载以提升fcp和lcp;而prefetch优先级低,适用于下一页可能用到的资源,如html、图片,通过在浏览器空闲时预加载。两者需合理使用,避免…

    2025年12月22日 用户投稿
    000
  • HTML5的Input的Min和Max属性有什么用?如何限制输入范围?

    HTML5的Input的Min和Max属性有什么用?如何限制输入范围?HTML5的Input的Min和Max属性有什么用?如何限制输入范围?HTML5的Input的Min和Max属性有什么用?如何限制输入范围?HTML5的Input的Min和Max属性有什么用?如何限制输入范围?

    要限制html输入范围,最直接的方式是使用html5 input元素的min和max属性。1. min和max属性用于限定数值或时间类型的输入值范围,如type=”number”、type=”date”等;2. 可配合step属性定义步长,实现更精确控…

    2025年12月22日 用户投稿
    000
  • HTML的label标签怎么用?如何绑定表单元素?

    label标签在html中通过两种方式绑定表单元素以提升用户体验和可访问性。第一种方式是使用for属性关联控件的id,确保表单控件有唯一id并将label的for属性设为该id,适用于复杂表单布局;第二种方式是将表单控件直接包裹在label标签内部,无需for和id属性,适用于简单表单或复选框/单选…

    2025年12月22日
    100
  • HTML5的Details和Summary标签怎么用?如何实现折叠内容?

    HTML5的Details和Summary标签怎么用?如何实现折叠内容?HTML5的Details和Summary标签怎么用?如何实现折叠内容?HTML5的Details和Summary标签怎么用?如何实现折叠内容?HTML5的Details和Summary标签怎么用?如何实现折叠内容?

    html5的ails>和 标签能实现原生折叠内容功能。1. 核心用法是将隐藏内容包裹在 中,标题放在其内的 里;2. 应用场景包括faq列表、高级设置折叠、法律条款收纳、教程补充说明等;3. 可通过css自定义样式,如移除默认箭头、添加图标及动画,并用javascript监听toggle事件实…

    2025年12月22日 用户投稿
    000
  • HTML的fieldset和legend标签怎么用?如何分组表单?

    使用fieldset和legend标签的核心原因在于提升表单的语义化和可访问性,1. 它们为屏幕阅读器等辅助技术提供明确的上下文信息,2. 通过默认边框和嵌入标题增强视觉分组,3. 便于开发者后期维护和管理复杂表单结构。常见应用场景包括用户注册表单中的“联系方式”、“登录信息”,支付信息中的信用卡号…

    2025年12月22日
    100
  • HTML5的Web Components是什么?如何自定义元素?

    HTML5的Web Components是什么?如何自定义元素?HTML5的Web Components是什么?如何自定义元素?HTML5的Web Components是什么?如何自定义元素?HTML5的Web Components是什么?如何自定义元素?

    web components是一套浏览器原生的技术规范,用于创建可复用、封装良好的自定义html标签。它由三个核心规范组成:1. custom elements(自定义元素),允许开发者定义新的html标签并赋予其行为和生命周期回调;2. shadow dom(影子dom),提供独立的dom子树与样…

    2025年12月22日 用户投稿
    100
  • HTML表格如何实现数据的备份恢复?有哪些方案?

    HTML表格如何实现数据的备份恢复?有哪些方案?HTML表格如何实现数据的备份恢复?有哪些方案?HTML表格如何实现数据的备份恢复?有哪些方案?HTML表格如何实现数据的备份恢复?有哪些方案?

    html表格本身无法直接备份数据,因为它只是展示数据的结构,不具备存储能力。1. 表格数据通常来自html静态内容、javascript动态生成或api接口,需通过额外机制保存;2. 前端方案可通过javascript提取表格数据并导出为json或csv文件实现本地备份,导入时读取文件并重新渲染表格…

    2025年12月22日 用户投稿
    000

发表回复

登录后才能评论
关注微信