完全小白课程 · 预计 45 分钟
JavaScript 中的变量和常量
从“有名字的盒子”开始，把每个英文、符号和执行步骤都拆开。你不需要提前懂编程，也不需要会英语。
本课开始前
放心开始：本课不要求你懂英文或编程
所有英文都会紧跟中文意思，所有符号都会说明用途。你只需要从上往下阅读，并跟着示例观察“盒子”里发生了什么。
学完后，你能够：
- 看懂三行最基础的 JavaScript（网页编程语言）代码
- 知道 const 和 let 应该怎么选择
- 看懂 =、双引号和分号
- 独立写出保存姓名和学习时间的代码
生活化理解
studentName
盒子里的内容：“小明”
变量（可以保存数据的有名盒子），就像一个贴着标签的收纳盒。盒子的名字让我们以后能够准确找到里面的数据。
程序会同时处理姓名、学习天数、分数等许多数据。如果不给数据起名字，计算机和写代码的人都不知道哪个数字或文字代表什么。
创建（第一次准备盒子）之后，我们可以读取里面的内容。有些盒子允许换成新内容，有些盒子不准备再换。
英文关键词
当前代码中的用途：总称：有名字、能保存数据的盒子。
当前代码中的用途：完整英文单词，表示创建后不准备重新放入新内容的盒子。
当前代码中的用途：constant（常量）在代码中的缩写写法。本课用它保存姓名。
当前代码中的用途：本课用它创建以后可能改变的学习天数。
当前代码中的用途：组成 studentName，说明盒子里保存的是姓名。
当前代码中的用途：组成 studentName，说明这个姓名属于学生。
当前代码中的用途：组成 studyDays，说明这些天数与学习有关。
当前代码中的用途：组成 studyDays，说明盒子里保存的是天数。
逐字符拆解第一行代码
const studentName = "小明";const代码关键词- 中文意思
- 创建一个不准备重新放入新内容的盒子
- 在这行中的作用
- 告诉计算机现在要创建 studentName。
- 为什么这样写
- 姓名在这个例子中不准备改变，所以使用 const。
studentName盒子的名字- 中文意思
- 学生姓名
- 在这行中的作用
- 以后使用这个名字就能找到“小明”。
- 为什么这样写
- 名字要说明保存的内容，看到它就能猜到里面是学生姓名。
student第一个英文单词- 中文意思
- 学生
- 在这行中的作用
- 说明这个名字与学生有关。
- 为什么这样写
- 它放在组合名称的最前面，所以全部使用小写字母。
Name第二个英文单词- 中文意思
- 名字
- 在这行中的作用
- 说明保存的具体内容是姓名。
- 为什么这样写
- 它是后面的单词，所以首字母 N 使用大写。
=等号，也是放入符号- 中文意思
- 把右边的内容放到左边的盒子里
- 在这行中的作用
- 把“小明”放进 studentName。
- 为什么这样写
- 这里不是数学中的“判断两边相等”，而是在执行一次放入操作。
" "双引号- 中文意思
- 标出一段文字的开始和结束
- 在这行中的作用
- 告诉计算机“小明”是文字。
- 为什么这样写
- 没有引号，计算机会把里面的内容误认为另一个代码名称。
小明文字内容- 中文意思
- 要保存的学生姓名
- 在这行中的作用
- 这是最终被放进 studentName 的数据。
- 为什么这样写
- 程序需要记住这个具体姓名，所以把它写在引号里面。
;分号- 中文意思
- 这一条命令结束
- 在这行中的作用
- 告诉计算机第一行已经写完。
- 为什么这样写
- 它让每条命令的边界更清楚，本课程示例统一保留分号。
逐字符拆解第二行代码
let studyDays = 7;let代码关键词- 中文意思
- 创建一个以后可以修改的盒子
- 在这行中的作用
- 告诉计算机现在要创建 studyDays。
- 为什么这样写
- 学习天数会继续增加，因此允许以后修改。
studyDays盒子的名字- 中文意思
- 学习天数
- 在这行中的作用
- 以后使用这个名字就能找到保存的天数。
- 为什么这样写
- 名字直接说明数据与学习天数有关。
study第一个英文单词- 中文意思
- 学习
- 在这行中的作用
- 说明这个数据与学习有关。
- 为什么这样写
- 它是第一个单词，所以使用小写字母。
Days第二个英文单词- 中文意思
- 天数
- 在这行中的作用
- 说明保存的数据是天数。
- 为什么这样写
- 它是后面的单词，所以首字母 D 使用大写。
=等号，也是放入符号- 中文意思
- 把右边的内容放到左边的盒子里
- 在这行中的作用
- 把数字 7 放进 studyDays。
- 为什么这样写
- 这里表示放入，不是数学中的判断相等。
7数字- 中文意思
- 已经学习 7 天
- 在这行中的作用
- 这是 studyDays 最开始保存的数据。
- 为什么这样写
- 7 要用于计算，所以不加引号；加上引号就会变成文字。
;分号- 中文意思
- 这一条命令结束
- 在这行中的作用
- 告诉计算机第二行已经写完。
- 为什么这样写
- 让计算机和读代码的人清楚一条命令在哪里结束。
解释第三行代码
studyDays = 8;代码执行过程
创建 studentName
保存文字“小明”
studentName → “小明”创建 studyDays
保存数字 7
studyDays → 7修改 studyDays
用数字 8 替换 7
studyDays → 8最终结果
studentName 是文字“小明”
studyDays 是数字 8
const 和 let 对比
| 代码写法 | 创建后能否重新赋值 | 适合保存什么 |
|---|---|---|
| const（创建后不重新赋值） | 不能重新放入新内容 | 不准备改变的内容，例如本例中的姓名 |
| let（创建后可以修改） | 可以重新放入新内容 | 可能变化的内容，例如学习天数 |
本课只学习“重新赋值（把新内容放进已有盒子）”的基础区别，不展开对象内部修改等高级内容。
正确和错误示范
const studentName = "小明";
studentName = "小红";会报错：const 创建的盒子不允许重新放入“小红”。
let studentName = "小明";
studentName = "小红";可以运行：let 创建的盒子允许把内容修改为“小红”。
let studyDays = "7";双引号让 7 变成文字，不能直接当普通数字计算。
let studyDays = 7;没有引号的 7 是数字，可以参与加减计算。
跟着写练习
每一步先阅读题目和提示，再决定是否查看答案。答案默认隐藏。
创建自己的名字
创建一个叫 myName 的盒子，保存你的名字。
创建今天学习分钟数
创建 todayMinutes，最开始保存数字 20。
修改今天学习分钟数
把已经创建的 todayMinutes 从 20 修改为 30。
选择 const 还是 let
保存不会改变的出生城市，应该选择 const 还是 let？
判断数字是否需要引号
保存可用于计算的学习时长 45，应该写 45 还是 "45"？
判断是否再次写 let
已经写过 let score = 1;，现在把 score 改成 2，该怎么写？
本课小测验
1. 本课中，const 和 let 最容易理解的区别是什么？
2. 代码中的 = 表示什么？
3. 双引号的作用是什么？
4. 要保存用于计算的数字 7，哪种写法正确？
5. 已经写过 let studyDays = 7;，修改成 8 时应该怎么写？
完成全部 5 道题后即可提交。
本课总结
- 变量（有名字的数据盒子）用来保存程序需要记住的内容。
- const 用来创建不准备重新赋值的盒子。
- let 用来创建以后可以修改的盒子。
- = 表示把右边的内容放到左边，不是数学中的判断相等。
- 引号里面是文字；用于计算的数字通常不加引号。
课程状态
选择最符合你现在感受的状态。状态只保存在当前浏览器中，可以随时修改。