企业官网建设流程全解析

摘要：JavaScript 三种变量声明方式var、let、const，是前端高频面试考点。本文结合思维导图梳理三者特性、区别，理清变量提升、块级作用域、重复声明等核心知识点。

一、前言

在 ES5 时代只有var来声明变量，存在很多设计缺陷。ES6 新增了let和const，引入块级作用域，解决了var带来的很多 bug。开发中现在基本推荐优先使用let、const，少用或者不用var。下面对比三者核心特点。

二、var（旧版本声明）

1. 变量提升执行代码的时候，var的声明会提升到当前作用域顶部，只提升声明，不提升赋值。声明和赋值是分开执行的。

console.log(a); // undefined var a = 10; // 实际JS解析等价于 var a; console.log(a); a = 10;

1. 允许重复声明同名变量同一个作用域可以多次var同一个变量，不会报错，后面的值会覆盖前面。

var num = 1; var num = 2; console.log(num); // 2

1. 没有块级作用域，只有全局 / 函数作用域if、for大括号{}形成的代码块，对var不起约束，块内声明的变量外部也可以访问，容易造成变量污染。

三、let（ES6 变量声明）

let用来声明可以修改的变量，解决 var 大部分问题。

1. 不存在变量提升必须先声明，再使用，在声明之前调用会报错，也就是常说的暂时性死区。

console.log(b); // Uncaught ReferenceError let b = 20;

1. 不能重复命名同一个作用域内，不允许重复声明同一个变量名称，直接报错。

let c = 10; let c = 20; // 报错，标识符已经声明

1. 支持块级作用域大括号{}（if、for、while）内部使用let，变量只在这个块里面生效，外部访问不到，避免全局变量污染。

四、const（ES6 常量声明）

const和let大部分规则一致，专门用来声明常量。

1. 和let相同点：

• 拥有块级作用域
• 不可以重复声明
• 不存在变量提升，存在暂时性死区

1. 声明的时候必须立刻赋值，不能只声明不赋值

const PI; // ❌报错，缺少初始值 const PI = 3.14; // ✅正确

1. 基本数据类型，值不允许修改如果存储number、string、布尔这类原始类型，一旦赋值，就不能重新赋值修改。

const name = "张三"; name = "李四"; // ❌报错，常量不能修改

1. 引用类型 (数组、对象)，可以修改内部内容const限制的是变量指向的地址不能改变，对象、数组内部属性、元素可以修改，只是不能直接重新赋值整个对象 / 数组。

const arr = [1,2,3]; arr.push(4); // ✅允许修改内部元素 arr = [5,6]; // ❌报错，不能直接重新赋值

五、三者对比速查表

六、开发使用建议

1. 尽量抛弃 var，它没有块级作用域、变量提升、允许重复声明，很容易出现难以排查的 bug。
2. 优先使用const：只要确定变量不会重新赋值，就用 const。
3. 只有后续需要重新修改变量值的时候，才使用let。

小结

var是旧时代产物，坑点较多；let适合可变变量；const适合常量。块级作用域、变量提升、暂时性死区、const 引用类型的特性，是面试经常考察的地方，尤其是 const 对象数组可以修改内部属性这点很容易踩坑。