摘要：JavaScript 三种变量声明方式
var、let、const，是前端高频面试考点。本文结合思维导图梳理三者特性、区别，理清变量提升、块级作用域、重复声明等核心知识点。
一、前言
在 ES5 时代只有var来声明变量，存在很多设计缺陷。ES6 新增了let和const，引入块级作用域，解决了var带来的很多 bug。开发中现在基本推荐优先使用let、const，少用或者不用var。下面对比三者核心特点。
二、var（旧版本声明）
-
变量提升 执行代码的时候，
var的声明会提升到当前作用域顶部，只提升声明，不提升赋值。声明和赋值是分开执行的。console.log(a); // undefined
var a = 10;
// 实际JS解析等价于
var a;
console.log(a);
a = 10; -
允许重复声明同名变量 同一个作用域可以多次
var同一个变量，不会报错，后面的值会覆盖前面。var num = 1;
var num = 2;
console.log(num); // 2 -
没有块级作用域，只有全局 / 函数作用域
if、for大括号{}形成的代码块，对var不起约束，块内声明的变量外部也可以访问，容易造成变量污染。
三、let（ES6 变量声明）
let用来声明可以修改的变量，解决 var 大部分问题。
-
不存在变量提升 必须先声明，再使用，在声明之前调用会报错，也就是常说的暂时性死区。
console.log(b); // Uncaught ReferenceError
let b = 20; -
不能重复命名 同一个作用域内，不允许重复声明同一个变量名称，直接报错。
let c = 10;
let c = 20; // 报错，标识符已经声明 -
支持块级作用域 大括号
{}（if、for、while）内部使用let，变量只在这个块里面生效，外部访问不到，避免全局变量污染。
四、const（ES6 常量声明）
const和let大部分规则一致，专门用来声明常量。
- 和
let相同点：
- 拥有块级作用域
- 不可以重复声明
- 不存在变量提升，存在暂时性死区
-
声明的时候必须立刻赋值，不能只声明不赋值
const PI; // ❌报错，缺少初始值
const PI = 3.14; // ✅正确 -
基本数据类型，值不允许修改 如果存储
number、string、布尔这类原始类型，一旦赋值，就不能重新赋值修改。const name = "张三";
name = "李四"; // ❌报错，常量不能修改 -
引用类型 (数组、对象)，可以修改内部内容
const限制的是变量指向的地址不能改变，对象、数组内部属性、元素可以修改，只是不能直接重新赋值整个对象 / 数组。const arr = [1,2,3];
arr.push(4); // ✅允许修改内部元素
arr = [5,6]; // ❌报错，不能直接重新赋值
五、三者对比速查表
| 特性 | var | let | const |
|---|---|---|---|
| 变量提升 | ✅有 | ❌无 | ❌无 |
| 重复声明 | ✅允许 | ❌不允许 | ❌不允许 |
| 块级作用域 | ❌无 | ✅有 | ✅有 |
| 声明必须赋值 | ❌不需要 | ❌不需要 | ✅必须 |
| 修改值 | ✅可修改 | ✅可修改 | 基本类型不可改，引用类型内部可改 |
六、开发使用建议
- 尽量抛弃 var，它没有块级作用域、变量提升、允许重复声明，很容易出现难以排查的 bug。
- 优先使用
const：只要确定变量不会重新赋值，就用 const。 - 只有后续需要重新修改变量值的时候，才使用
let。
小结
var是旧时代产物，坑点较多；let适合可变变量；const适合常量。块级作用域、变量提升、暂时性死区、const 引用类型的特性，是面试经常考察的地方，尤其是 const 对象数组可以修改内部属性这点很容易踩坑。