#100DaysOfVanillaJS:什么是 JavaScript、原始数据类型以及 Let、Var 和 Const

2025-05-27

#100DaysOfVanillaJS:什么是 JavaScript、原始数据类型以及 Let、Var 和 Const

替代文本

美少女战士学习如何编码 :p

我为什么要创建#100DaysofVanillaJS 系列?

(这是本教程的完全可选部分,请随意跳过!)

本系列是我尽力用最好的方式解释 JavaScript 的尝试。我经历了失败、构建以及在日常工作中使用它,才真正开始理解它,并欣赏它的本质和它的功能。

本系列的目标不仅是向您介绍编程语言的基础知识,还要解释 JavaScript 在无需任何框架或库的情况下的底层工作原理。随着 JavaScript 不断推出更多功能,本系列将持续更新。我也希望加深自己对 JavaScript 的了解,这对我来说是提升技术沟通能力的绝佳途径。

我的目标是让这个系列易于消化和理解,无论你是编码的完全初学者还是正在为那些过于紧张的技术面试做准备。

你应该期待每天都有帖子吗?不完全是,但会非常频繁,至少每周一篇。目标是到 2021 年底发布 100 篇关于 JavaScript 的帖子,准备好迎接这场冒险了吗?

JavaScript 到底是什么?

替代文本

JavaScript 是一种使网页更具动态性的编程语言。HTML 是网页的文本,CSS 是网页的样式设置,而 JavaScript 则是让网页更具交互性的元素。每当用户与页面交互(点击按钮、切换页面、对教程进行评分等)时,JavaScript 都必不可少。将这三种 Web 技术结合起来,您一定会创造出非常棒的作品。

JavaScript 是一种动态类型语言,这意味着您在设置值时无需声明类型,并且可以自由更改类型,这与静态类型语言或 C++ 等工具不同,后者必须在初始化时声明值的类型。在像 JavaScript 这样的动态类型语言中,一旦您的代码运行,JavaScript 引擎就会决定值的类型,因此您无需明确声明。

JavaScript 作为一种语言正在不断发展

JavaScript 由不同的浏览器实现,新功能的实现也由这些浏览器决定。有一个叫做ECMA的组织,是一个负责制定各种标准的国际组织。ECMAscript是编程语言的规范,规定了编程语言的行为和工作方式。

TC39是一个负责维护这份文档的委员会,每年代表们都会齐聚一堂,共同商讨需要添加哪些新功能。这就是我们拥有ES2015、ES2016、ES2017、ES2018等等的原因!

不同的浏览器随时都会支持不同的功能,因此我强烈建议您收藏 caniuse.com 等网站,以便及时了解 JavaScript 功能的浏览器兼容性。您将学习到的一些功能(例如模板字面量)大多数浏览器都支持,但某些浏览器(例如 IE11)不支持。

那么我们如何运行它呢?

替代文本

  • 网络浏览器
  • 任何文本编辑器
  • 控制台- 无需任何设置即可快速运行和调试代码

JavaScript 只需要一个 Web 浏览器(例如 Chrome 或 Firefox)和一个文本编辑器。根据您使用的操作系统,您可以在笔记本电脑或台式机上找到默认的文本编辑器,例如 Notepad 或 iTerm。您也可以下载一个编辑器,例如 Sublime 或 Visual Studio Code(我首选的文本编辑器,因为它带有内置终端)。

JavaScript 控制台是您可以快速运行、测试和调试代码的地方。在这里,您可以测试一下我接下来几节课要教给您的内容。

如果你还不太了解 Dev Tools 是什么,它基本上就是用来检查网页元素和性能,并在控制台中运行代码的地方。控制台现在可以说是你创建基本变量和函数的游乐场。

如果您使用的是 Chrome,您也可以直接转到查看 -> 开发者 -> JavaScript 控制台,如下所示。
替代文本

如果您使用的是 Firefox,请单击浏览器右上角的 Firefox 菜单,然后选择 Web 开发人员 -> 浏览器控制台。

如果您使用的是其他网络浏览器,可以在其搜索引擎中快速查找如何打开开发者工具。但在以后的教程中,我将主要使用 Chrome 开发者工具!

好了,够了...现在让我们开始学习 JavaScript!

原始数据类型

替代文本
数据类型是指我们在应用程序中使用的不同类型的数据。为了避免这篇博文太长,我将在以后的课程中深入探讨一些数据类型,例如字符串、布尔值以及 null 和 undefined!

数据类型 定义 例子
细绳 用单引号或双引号括起来的文本字符串 “我们将共同征服 JavaScript”
数字 表示数字数据(正数、负数、整数和小数) 3、3.5、2.00
布尔值 将信息表示为真或假 对或错
象征 不等于任何其他值的唯一标识符/值 const mySymbol = Symbol();
无效的 有意/明确地缺少任何值,可以稍后重新分配 const relationshipStatus = null;
不明确的 未赋值的变量;隐式 常量无值;

typeof 函数()

因此,您可以使用一个简洁的函数来检查一段数据的类型,那就是输入typeof。不妨试试看!
替代文本

数字

很简单,数字可以是一种值。你可以执行数学运算,例如除法、减法、加法、乘法等等!当你同时执行多个数学运算时,请记住 JavaScript 遵循 PEMDAS(序列中的某些运算在其他序列中具有更高的优先级……因此括号、指数、乘法、除法、加法、减法)。

手术 象征 意义 例子
添加 + 添加 2 + 2
减法 - 减去 2-2
分配 / 划分 32 / 2
乘法 * 乘法 2*2
余数或模运算符 返回将第二个数字除以第一个数字后剩下的余数,次数尽可能多,例如 3 % 3 得到 0 5 % 5 = 0(5除以5的五次方对吗?所以这意味着没有余数,你什么也没有,这就是答案。)
指数 ** 将数字提高到某个幂 2**2

关于 NaN 的简单说明...

替代文本
当您尝试使用字符串执行数学运算(除加法之外)时,它们将返回 NaN(非数字)。

Var、Let 和 Const

替代文本
简单来说,变量就是我们存储值的方式,以便将来引用、使用和更改。当我们使用函数时,访问和引用某些变量的方式会发生变化,但现在我们不必太担心!

在我们可以轻松更改变量含义/值的前提下,设置变量的首选方法是let。我们过去使用var声明变量,但这已不再被视为最佳实践。有一些原因导致 var 不再被视为最佳实践,我们将在稍后讨论作用域时深入探讨原因。现在需要注意的是, var 并非严格声明,并且可能导致错误,因为您可以多次重新声明同一个变量,这可能会随着应用程序的增长而导致混乱。

声明变量时,还需要注意其他一些最佳实践:

  • 命名变量时,尽量描述得简洁
  • 我们用驼峰命名法(camelCase)来书写变量。例如:let myName, const currentUser
  • 变量命名时,有些保留关键字是不允许使用的。例如:let(因为这样会非常容易混淆),
  • 即使我们同时使用 let 和 const 声明,变量也不能同名。例如:let myName & const myName 不起作用!

由于let变量默认是可变的,因此您可以轻松地重新赋值或重命名它们,但 const 变量无法重新赋值。您将会遇到错误。这绝对不会是我们唯一一次讨论 var、let 和 const 之间区别的场合。当我们在函数上下文中讨论局部作用域和全局作用域时,这个话题还会再次出现,所以不用担心!

评论,评论,评论

注释是我们为自己或团队成员留下关于已编写代码的提醒的方式。注释可以是单行注释,也可以是多行注释,如下所示:
替代文本

那么接下来是什么...

我们将讨论以下主题:

  • 空值和未定义
  • 最新的数据类型:符号
  • 关于字符串
  • 函数、本地和全局范围>
  • 循环、数组和对象

以上只是我们将要讨论的 JavaScript 主题中的一小部分。希望这能让你对接下来的内容有所了解。希望你到目前为止玩得开心!欢迎你留下你希望我在以后的 JavaScript 文章中解答的主题或问题!

文章来源:https://dev.to/taeluralexis/100daysofvanillajs-what-is-javascript-primitive-data-types-let-var-and-const-4040
PREV
Git 拆解:如何从主分支创建分支并进行首次提交!Git 拆解系列隆重推出!
NEXT
#100DaysOfPython 第一天:Hello World、数据类型和字符串。是什么促使我选择 Python 作为我的第二语言?为什么我要写博客?#100DaysOfPython 系列的第二天我会学习什么?