JavaScript: JavaScript 变量

最后更新：2026-10-13

变量是装数据的盒子——你给盒子贴个名字标签，随时往里放数据、取数据、换数据。

相关语句：function const let var for

1. 什么是变量

想象你有一排贴着标签的盒子：一个叫"姓名"装着"张三"，一个叫"年龄"装着 25。盒子里的东西可以换，标签不变——这就是变量。

在 JS 中，你用声明关键字（var / let / const）创建变量，用等号赋值：

var name = "张三";
let age = 25;
const PI = 3.14;

var 是 ES6 之前唯一的声明方式，它有两个让人头疼的特性：

1. 函数作用域——在 if 或 for 里用 var 声明的变量，外面也能访问到，这不符合直觉
2. 变量提升——var 声明会被"提升"到作用域顶部，赋值不会提升。你可以在声明前使用变量（值为 undefined），不会报错但容易误判

这两个特性让 var 成为 bug 的温床。现代 JS 中，var 基本已经被 let 和 const 取代。

3. let — 块级作用域，推荐首选

let 在 ES6（2015）中引入，修复了 var 的两个问题：

• 块级作用域——只在 {} 内有效，出了块就访问不到
• 不存在变量提升——在声明前使用会直接报错（暂时性死区）

日常开发中，需要重新赋值的变量用 let。

4. const — 常量，不可重新赋值

const 也是块级作用域，但声明时必须赋值，且之后不能再重新赋值。

注意：const 限制的是"不能重新赋值"，不是"不能修改"。如果 const 装的是对象或数组，你可以修改对象属性或数组元素，只是不能把这个变量指向另一个对象。

能用 const 就用 const，需要变的时候再用 let——这是最佳实践。

5. 变量命名规则

• 以字母、下划线 _ 或美元符 $ 开头
• 后面可以跟字母、数字、下划线、美元符
• 不能以数字开头
• 不能使用 JS 关键字（var、let、function 等）
• 推荐驼峰命名法：firstName、totalPrice

6. 同时声明多个变量

你可以用逗号分隔，一次性声明多个变量：

<script>
let a = 1, b = 2, c = 3;
</script>

不过为了可读性，建议每行一个变量。

▶ 示例：var 的变量提升和函数作用域

输出：

TEXT

📋 Copy

声明前访问 x = undefined
声明后访问 x = 10
循环内 i = 0
循环内 i = 1
循环内 i = 2
循环结束后 i = 3

▶ 示例：let 的块级作用域

输出：

TEXT

📋 Copy

外层 x = 100
内层 x = 200
出块后 x = 100
循环内 i = 0
循环内 i = 1
循环内 i = 2
循环外访问 i → 报错： ReferenceError

▶ 示例：const 常量

输出：

TEXT

📋 Copy

PI = 3.14159
重新赋值 → TypeError： Assignment to constant variable.
user = {"name":"张三","age":26,"city":"北京"}

▶ 示例：var / let / const 对比

输出：

TEXT

📋 Copy

循环外 var i = 3
循环外 let j → ReferenceError （正确行为）
MAX = 100
重赋值 → TypeError （正确行为）

相关语句：function const let var for

❓ 常见问题

📖 小节

• 变量是装数据的盒子，用声明关键字 + 变量名 + 赋值来创建
• var 有函数作用域和变量提升问题，现代 JS 中应避免使用
• let 有块级作用域，不存在变量提升，需要重新赋值时使用
• const 有块级作用域且不可重新赋值，声明时必须赋值
• const 不能重新赋值，但对象/数组的属性和元素可以修改
• 选择优先级：const 优先，let 其次，var 避免

📝 作业

1. 基础题：用 const 声明一个常量 SITE_NAME 赋值为你的名字，用 let 声明一个变量 visitCount 赋值为 0，然后在页面上显示这两个值。
2. 进阶题：创建一个页面，用一个按钮模拟"访问计数"——每次点击按钮让 visitCount 加 1 并显示当前值，体会 let 可重新赋值而 const 不行的区别。
3. 挑战题：创建一个页面，用 const 声明一个学生对象 { name: "张三", scores: [80, 90, 75] }，然后实现：添加一个新成绩 85、计算平均分、修改名字为"李四"，全程 const 不变，验证对象内容可以修改。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们