🚀 前端基础必懂：var、let、const 区别 | 深度解析+避坑指南

一、var 的特性（旧时代变量声明）

1. 函数级作用域，块级作用域会变量泄露
2. 存在变量提升，访问到 undefined
3. 可重复声明、可重新赋值
4. 全局声明会挂载到 window

示例代码

console.log(a); // undefined
var a = 1;

function fn() {
  var a = 2;
  console.log(a); // 2
}
fn();
console.log(a); // 1

二、let 的特性（ES6 块级变量）

1. 块级作用域，外部无法访问块内变量
2. 存在变量提升，但有暂时性死区 TDZ
3. 不可重复声明，可重新赋值
4. 不会挂载到 window

示例代码

console.log(a); // Cannot access 'a' before initialization
let a = 1;

function fn() {
  console.log(a); // 报错
  let a = 2;
}

原因：暂时性死区 —— 声明前无法访问

三、const 的特性（ES6 常量）

1. 块级作用域
2. 有 TDZ 暂时性死区
3. 不可重复声明、不可重新赋值
4. 声明时必须初始化
5. 引用类型（对象/数组）内部可修改，引用地址不可变

示例代码

const a = 1;
a = 2; // 报错：Assignment to constant variable

const obj = { name: "test" };
obj.name = "new"; // 允许修改属性

四、核心区别对比表（面试必背）

五、实战避坑 & 最佳实践

1. 永远不用 var，避免变量提升与泄露
2. 优先用 const，保证数据不可变，更安全
3. 需要修改时用 let（循环、状态更新）
4. 避免在 TDZ 中访问变量，提前声明
5. 引用类型用 const 时，可修改属性/元素，不建议随意改引用

六、总结一句话

var 有坑、let 可变、const 不可变；优先 const，其次 let，杜绝 var。

PS：打个小广告🚀
我是24届前端，拿了八个大厂offer，大部分ssp。最近在辅导一些同学，大多数同学都拿到了心仪的大厂offer，感兴趣的26-28届同学可以私信我了解哈（深度八股文、ssp项目、顶级简历修改，挖掘包装项目重难点、模拟面试等全流程服务）