前端简单的的变量声明

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

在 ES5 时代只有var来声明变量，存在很多设计缺陷。ES6 新增了let和const，引入块级作用域，解决了var带来的很多 bug。开发中现在基本推荐优先使用let、const，少用或者不用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用来声明可以修改的变量，解决 var 大部分问题。

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

console.log(b); // Uncaught ReferenceError
let b = 20;
不能重复命名 同一个作用域内，不允许重复声明同一个变量名称，直接报错。

let c = 10;
let c = 20; // 报错，标识符已经声明
支持块级作用域 大括号{}（if、for、while）内部使用let，变量只在这个块里面生效，外部访问不到，避免全局变量污染。

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