主题
1-2JavaScript变量
本页对应 第一章JavaScript基础，共 7 段视频，约 50 分钟。
学习目标
- 能够用
let声明变量、赋值并输出变量值，区分声明、赋值与初始化三种写法。 - 能够通过重新赋值更新变量，识别并说明同一变量被多次
let声明时的报错原因，能认出一次声明多个变量的逗号简写形式。 - 能够独立完成“输出用户名”案例：使用
prompt获取输入、用变量保存数据、再用document.write输出结果。 - 能够借助临时变量完成两个变量值的交换，并解释每一步赋值“把右边给左边”的执行过程。
- 能够说明变量的本质是内存中申请的小空间，并依据命名规则与规范判断变量名是否合法、是否专业。
- 能够使用
const声明常量并完成初始化，说明常量不可重新赋值、声明时必须赋值及其使用场景。
知识点
变量是什么：先建立“容器”直觉
为什么需要：用户输入的数据、程序计算的结果都要先保存下来，后面才能继续使用；没有变量，数据就无处存放。怎么想：变量不是数据本身，而是计算机中用来存储数据的“容器”，可以理解成装东西的纸箱子。怎么做：把数字、文字等数据放进变量这个盒子里，以后通过变量名找到盒子，再取出里面的值。 
易错点：不要把“35”“电脑”这些数据本身叫变量，变量指的是装它们的容器；也不要把变量名加引号，否则它就从“盒子”变成了普通字符串。
声明与赋值：先造盒子，再放数据
为什么需要：使用变量前必须先创建变量，否则程序不知道把数据存到哪里。怎么想：声明就是造盒子，赋值就是往盒子里放数据；赋值号 = 的规则是“把右边给左边”。怎么做：用 let 加变量名声明，再用 = 赋值；也可以声明的同时直接赋值，称为变量初始化。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// let 变量名
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
</script>
</body>
</html>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
// 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18
// 这样 age 的值就成了 18
document.write(age)
// 也可以声明和赋值同时进行
let str = 'hello world!'
alert(str);
</script>
</body>
</html>易错点：输出变量时写 console.log(age)，不要写成 console.log('age')；后者输出的是文字“age”，不是变量里的值。调试时可在 VS Code 写 let age; age = 18; document.write(age)，页面显示 18，说明声明和赋值成功。
更新变量：旧瓶装新酒
为什么需要：变量里的值可以变化，例如年龄从 18 变成 19，不能重新造一个同名盒子。怎么想：更新变量就是拿一个新值放进原来的盒子，旧值被覆盖。怎么做：已经声明过的变量，直接再赋值即可。
javascript
// 1.更新变量
let age = 18
age = 19
// 注意: 不要多次声明同一个变量
// let age = 19
console.log(age)易错点：不要用 let age = 19 再声明一次。浏览器会报 Identifier 'age' has already been declared，意思是标识符 age 已经被声明过。调试时先 console.log(age) 看到 18，再执行 age = 19，再次输出就是 19，说明新值覆盖了旧值。
一次声明多个变量：能认出来即可
为什么需要：有时想少写几个 let，于是出现多个变量用逗号分隔的简写。怎么想：简写能减少代码长度，但一行多个变量会降低可读性。怎么做：语法是多个变量中间用逗号隔开；实际开发更推荐一行声明一个变量。
javascript
// 2. 一次声明多个变量的简写方式 (了解 能认出来就可以了)
// let uname = 'pink', sex = '男'
let uname = 'pink'
let sex = '男'
console.log(uname, sex)易错点：不要因为简写短就大量使用；阅读代码时一行一个变量更清楚。看到 let uname = 'pink', sex = '男' 要能认出这是一次声明多个变量，但自己写时优先分开写。
let 和 var：统一使用 let
为什么需要：旧代码常用 var 声明变量，但 var 有一些不合理行为。怎么想：let 是为了解决 var 的问题而出现的。怎么做：新代码统一用 let；看到老程序里的 var 能理解即可。易错点：var 允许先使用后声明、允许重复声明，还涉及变量提升、全局变量、没有块级作用域等问题，所以不要模仿。结论是：var 是旧写法，以后声明变量统一使用 let。
变量的本质：内存中的小空间
为什么需要：只知道“盒子”还不够，理解本质才能明白变量名的作用。怎么想：内存是计算机存储数据的地方，是一个大空间；变量是程序在内存中申请的一块用来存放数据的小空间。怎么做：执行 let age = 18 时，程序到内存申请小空间，把 18 放进去；以后通过变量名 age 找到这块空间，取出数据。 
易错点：变量名不是数据，而是找到内存空间的标识；变量越多，内存中申请的小空间越多，靠变量名区分。
变量命名：规则是法律，规范是专业
为什么需要：变量名写错会报错，写得不专业会影响可读性。怎么想：规则必须遵守，不遵守就报错；规范是建议，不遵守不报错但显得不专业。怎么做：变量名只能由字母、数字、下划线、$ 组成，且不能以数字开头；区分大小写；不能用关键字或保留字；起名要有意义，并采用小驼峰命名法。易错点：let let = 10 会报错，因为 let 是关键字；let 1num = 10 会报错，因为数字开头；let num! = 10 会报错，因为 ! 不合法；Age 和 age 是两个不同变量，写成 console.log(Age) 可能报“未定义”。
javascript
// 1. 规则(法律)
// 1.1 变量名不能是关键字
// let let = 10
// 1.2 变量名的组成: 英文字母 数字 _ $ ，不能以数字开头
// let 1num = 10 错误
// let num! = 10 错误
// 1.3 js严格区分大小写
// let age = 18
// console.log(Age)
// 2. 规范(道德)
// 2.1 起名要有意义
// let age = 18
// let nl = 19
// 2.2 我们命名建议采取小驼峰命名法
let myName = 'pink'
let myFirstName = 'p'调试时若看到 Identifier 'age' has already been declared，先检查是否重复 let；若看到 Age is not defined，检查大小写是否一致。命名规范上，userName 比 nl 更见字知义，第一个单词首字母小写，后面单词首字母大写。
先认识常量：它也是保存数据的容器
为什么需要：程序里有些数据需要先保存起来，后面再使用。变量是容器，常量也是容器，都是用来保存数据的。转写稿里反复强调：常量“也是一个容器，用来保存数据”。
怎么想：先不要把常量想复杂，它可以理解成一个盒子。盒子里面可以放数据，例如圆周率 3.14。区别在于，这个盒子一旦装好值，就不允许随便换掉。
怎么做：用 const 声明常量，并通过常量名输出其中的值。本节笔记中的代码如下：
javascript
// 常量： 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项：
// 1. 常量里面的值是不允许修改的
pi = 3.141592653
console.log(pi)
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
// const url易错点：不要把常量名加引号输出。console.log(pi) 输出的是常量 pi 中保存的值；如果写成 console.log('pi')，输出的就是一段文字 pi，不是常量里的值。转写稿中虽然主要讲变量输出不要加引号，但常量输出同样应通过常量名获取值。
常量和变量的核心区别：常量里的值不允许改变
为什么需要：变量里的值可以变化，例如年龄可以从 18 更新为 19；但有些值从业务上就不应该被修改。如果所有数据都放进变量，程序就少了一层保护。
怎么想：转写稿中的核心句是：“变量里面的值是可以变化的，但是常量里面保存的值是不允许改变的。”因此，判断一个数据该用变量还是常量，先问自己：这个值以后会不会变？会变，用变量；永远不变，用常量。
怎么做：先声明 const pi = 3.14，再尝试重新赋值：
javascript
const pi = 3.14
console.log(pi)
pi = 3.141592653
console.log(pi)保存运行后，浏览器控制台会报错。转写稿中演示的报错信息是 Assignment to constant variable，意思是“对常量变量进行赋值”。错误信息还会指出出错的行号，方便定位到 pi = 3.141592653 这一行。
易错点：看到报错不要慌，先看行号和错误说明。转写稿里特别提醒：JavaScript 不仅告诉你错的原因，还会告诉你哪里错了。这里的错误不是 console.log(pi) 引起的，而是因为对 const 声明的 pi 重新赋值了。常量可以理解为“只读”的：可以获取里面的值，但不能修改里面的值。
常量声明时必须初始化
为什么需要：常量不允许后面重新赋值，所以如果声明时不赋值，这个常量就永远没有值，也没有机会再补上值。因此语法要求常量声明时必须初始化。
怎么想：变量可以先声明、后赋值，例如先有盒子，再往里放数据；常量不行。转写稿中的说法是：“声明常量的时候必须要赋值”，也就是必须完成初始化。
怎么做：正确写法是声明的同时赋值：
javascript
const pi = 3.14
console.log(pi)错误写法是只声明、不赋值：
javascript
// const url转写稿中演示：写 const url 后保存，会报错，错误信息大意是常量声明缺少初始化式，即 Missing initializer in const declaration。
易错点：不要写成 const url 后再想着“等会儿再赋值”。常量没有“先声明后赋值”的机会。声明常量时，等号右边的值必须一起写上。
使用场景：值永远不变时用常量保证程序安全
为什么需要：转写稿指出，使用常量的目的“也是为了程序的安全”。实际开发可能是多人协作，有些数据只想自己使用，不希望别人随便修改；放进常量后，别人就不能重新赋值修改它。
怎么想：当某个值永远不会改变，或者你不希望它被改变时，就优先考虑常量。例如圆周率这类固定值，适合用 const pi = 3.14 保存。反过来，年龄、分数、计数器等会变化的数据，应使用变量。
怎么做：先判断数据是否会变；不会变就用 const 声明并立即赋值；会变就用变量。声明后通过常量名读取和输出，不要尝试重新赋值。
易错点：不要因为“常量更安全”就把所有数据都写成常量。转写稿也说明，哪些数据放常量、哪些放变量，后面学到内存中的堆和栈时还会详细讲；当前先掌握：值永远不变、不希望被修改时用常量。
调试常量错误：看行号，也看错误说明
为什么需要：初学时常把“重新赋值”和“没有初始化”混在一起。借助报错信息，可以快速判断是哪种问题。
怎么想：先定位行号，再读错误关键词。出现 Assignment to constant variable，说明你对常量重新赋值了；出现缺少初始化式的提示，说明你声明常量时没有赋值。
怎么做：把本节代码放入编辑器，先正常运行 const pi = 3.14 和 console.log(pi)；再取消或写上 pi = 3.141592653，观察控制台报错；最后尝试 const url，观察另一类报错。通过两次对比，区分“修改常量”和“未初始化常量”。
易错点：转写稿中出现的“复值”“产量”“cost”等是口误或同音转写，实际应写作“赋值”“常量”“const”。读报错时也要抓住关键词，不要只看红色提示就慌。常量的两个关键注意事项是：不允许重新赋值；声明时必须初始化。
课件图示
代码示例
示例一：变量的声明、赋值、更新与命名规则
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// 1. 声明变量：let 是声明关键字，age 是变量名（标识符）
let age
// 2. 赋值：把 18 存入 age 这个“容器”
age = 18
document.write(age)
// 3. 声明的同时直接赋值（变量的初始化）
let str = 'hello world!'
alert(str)
// 4. 更新变量：给一个新值，旧值被覆盖
age = 19
console.log(age)
// 5. 一次声明多个变量（了解，能认出来即可，不推荐）
let uname = 'pink', sex = '男'
console.log(uname, sex)
// 6. 命名规则与规范
let myName = 'pink' // 小驼峰：第一个单词首字母小写，后面单词首字母大写
let myFirstName = 'p'
console.log(myName, myFirstName)
</script>
</body>
</html>要点解释
let age只创建了空“盒子”，age = 18才把数据装进去；let str = 'hello world!'是声明+赋值一步完成，称为变量的初始化。- 赋值号
=在编程里是把右边给左边，不是数学里的“相等”。 - 字符型数据必须加引号，
'hello world!'、'男'都要加，否则会被当成变量名。 - 易错点：不要多次声明同一个变量，
let age = 18之后再写let age = 19会报 “标识符 age 已经被声明” 的错误；更新值只需age = 19。 - 命名规则（必须遵守）：不能用关键字（如
let）；只能由字母、数字、_、$组成且不能数字开头（1num报错、num!报错）；严格区分大小写（Age和age是两个变量）。 - 命名规范（建议遵守）：起名要有意义（
age而不是nl），采用小驼峰命名法。
示例二：输出用户名案例 + 交换两个变量值案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 变量案例</title>
</head>
<body>
<script>
// 案例1：输出用户名 —— 输入数据 → 保存数据 → 输出数据
let yourName = prompt('请输入姓名')
document.write(yourName)
// 案例2：交换两个变量的值（借助临时变量）
let apple = '苹果汁'
let orange = '橙子汁'
let temp = ''
temp = apple // 把苹果汁倒入空杯子 temp
apple = orange // 把橙子汁倒入 apple 杯子
orange = temp // 把苹果汁倒入 orange 杯子
console.log(apple, orange)
</script>
</body>
</html>要点解释
prompt('请输入姓名')拿到用户输入的数据，let yourName = prompt(...)是在声明变量的同时完成赋值，把用户输入存进“盒子”。document.write(yourName)输出变量不加引号；加了引号document.write('yourName')就变成打印一段文字，而不是变量里的值。- 交换两个变量必须借助第三个临时变量
temp，相当于现实里两个杯子倒果汁要借一个空杯子，直接交换会把数据覆盖丢失。 - 易错点：
temp = apple是把 apple 的值给 temp，不能写反成apple = temp，那样 apple 里的苹果汁会被空值覆盖掉。 - 变量之间也可以互相赋值，赋值时传的是变量里存的值。
示例三：常量 const 的使用与注意事项
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 常量</title>
</head>
<body>
<script>
// 常量：也是一个容器，用于保存数据，但里面的值不允许改变
const pi = 3.14
console.log(pi)
// 注意事项1：常量里面的值不允许修改（下面这行会报错）
// pi = 3.141592653
// 注意事项2：常量声明时必须初始化，必须赋值（下面这行会报错）
// const url
</script>
</body>
</html>要点解释
const用来声明常量，const pi = 3.14声明的同时完成赋值，console.log(pi)通过常量名输出值。- 使用场景：某个值永远不会改变时（如圆周率），用常量保存更安全，防止别人随意修改。
- 易错点一：给常量重新赋值会报错，提示
Assignment to constant variable（对常量进行了赋值），报错信息还会告诉你是第几行出错。 - 易错点二：
const url只声明不赋值会报错，提示常量声明缺少初始化式，声明常量时必须赋值。 - 注意区分：变量的值可以变（旧瓶装新酒），常量的值只读、不可变。
常见错误
1. 同一个变量用 let 声明两次
- 现象：控制台报
Identifier 'age' has already been declared，代码中断不执行。 - 原因：
let不允许重复声明同一标识符，第二次let age让引擎无法判断该用哪个age。 - 修法：保留第一次
let，后续只写age = 19（更新值），不要重复加let。
2. 输出变量时给变量名加了引号
- 现象：
console.log('age')/document.write('uname')页面或控制台显示的是age、uname这串文字，不是里面的数据。 - 原因：加了引号就成了字符串字面量，不再是“盒子”本身，浏览器不再去内存里取值。
- 修法：
console.log(age)、document.write(uname)，变量名裸写不加引号。
3. 变量名不合规导致语法错误
- 现象：
let 1num = 10报Invalid or unexpected token；let num! = 10同样报错；let let = 10报关键字不能作变量名。 - 原因：标识符只能用字母、数字、
_、$，不能数字开头，也不能占用关键字/保留字。 - 修法：改成
let num1 = 10、let num_1 = 10、let numA = 10等合法形式。
4. 大小写不一致，取不到值
- 现象：
let age = 18后写console.log(Age)，报Age is not defined。 - 原因：JS 严格区分大小写，
Age与age是两个完全不同的变量，Age从未声明过。 - 修法：统一大小写，声明与使用保持完全一致的拼写（可借助编辑器的自动补全）。
5. 对常量重新赋值或声明时不赋值
- 现象：
const pi = 3.14后写pi = 3.14159，报Assignment to constant variable；写const url报Missing initializer in const declaration。 - 原因：常量只读，且声明时必须初始化。
- 修法：需要变化的量改用
let；常量一律写成const URL = '...'这种“声明即赋值”的形式。
6. 交换两个变量时赋值方向写反 / 忘记临时变量
- 现象：
temp = apple写成apple = temp，交换后apple变成undefined；或者直接apple = orange; orange = apple，两个变量最后都是橙子汁。 - 原因：赋值号是把右边给左边，方向写反等于把空盒子的值倒进了有数据的盒子；不借助临时变量则第一次赋值就覆盖掉了原值。
- 修法：严格按
temp = apple; apple = orange; orange = temp三步走，赋值前先默念“右边给左边”。
7. 沿用 var 的旧习惯
- 现象：先写
console.log(n)再写var n = 1不报错但得到undefined；或用var重复声明同名变量也不报错，逻辑却乱了。 - 原因：
var存在变量提升、允许重复声明等问题。 - 修法：新代码统一用
let（不变的用const），把var只当作读老代码时的识别对象。
练习
练习 1（找错） 下面代码有几处错误？分别怎么改？
javascript
let userName = 'pink'
let userName = 'pink'
console.log('userName')
const PI练习 2（命名规范） 判断下列变量名是否合法；合法的再判断是否符合规范，不符合的改写： 2num、my_name、$price、let、userName、nl、myFirstName
练习 3（交换变量） 已有 let a = '苹果汁' 和 let b = '橙子汁'，请借助一个临时变量把两者的值互换，并打印验证。
练习 4（输入—保存—输出） 用 prompt 让用户输入姓名和年龄，分别存进两个变量，再用 document.write 输出成“我叫 XX，今年 XX 岁”。
练习 5（常量判断） 下列数据该用 let 还是 const？说明理由：①圆周率 ②用户的当前分数 ③一周的天数 ④购物车商品数量。
参考答案要点
- 三处：重复声明
userName（删掉第二个let）；输出加了引号（去掉引号）；const PI未初始化（写成const PI = 3.14）。 2num非法（数字开头）；my_name、$price合法但不符合小驼峰，改为myName、price；let非法（关键字）；userName、myFirstName合法且规范；nl合法但无语义，改为age。let temp = a; a = b; b = temp;，打印a、b。let uname = prompt('请输入姓名'); let age = prompt('请输入年龄'); document.write('我叫' + uname + '，今年' + age + '岁')。- ①③ 用
const（永不改变）；②④ 用let（运行中会变化）。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 什么是变量以及基本使用（重点） | 08:24 |
| 2 | 更新变量和多次声明变量简写 | 08:32 |
| 3 | 输出用户名案例 | 05:21 |
| 4 | 交换两个变量值案例 | 07:28 |
| 5 | 变量的本质 | 03:59 |
| 6 | 变量的命名规则和规范 | 09:48 |
| 7 | 常量 | 06:32 |
小结
- 变量的三步走是“声明 → 赋值 → 使用”，实际开发中常用“声明即赋值”的初始化写法一句话完成前两步。
let的核心约束只有一条最容易踩：同一个作用域内不能重复声明，改值只写变量名 = 新值。- 变量名裸写才代表“盒子里的数据”，一旦加引号就退化成普通字符串——这是初学者最高频的显示错误。
- 命名先守“法律”再讲“道德”：合法（字母/数字/
_/$、非数字开头、非关键字、区分大小写）是底线，有意义 + 小驼峰才是专业。 - 变量本质是内存中申请的一小块空间，变量名就是找到这块空间的钥匙，理解这一点才能解释“为什么改名就取不到值”。
const的两条硬约束是“声明必须赋值”和“不可重新赋值”，用于保护程序中不该被改动的数据。- 报错信息是最好的：先看行号定位，再看英文关键词（
already been declared/not defined/Assignment to constant），就能反推出自己犯了哪类错。 - 交换变量这类经典题提醒我们：赋值方向永远是“右边给左边”，借助中间容器是解决覆盖问题的通用思路。