JS 中 var、let、const 的核心区别

在 JavaScript 变量声明中，var、let、const 是三种核心声明方式。其中 var 是 ES5 及之前的旧语法，let、const 是 ES6 新增的块级作用域声明语法。

本文将从变量提升、重复声明、赋值特性、三大核心维度拆解，搭配可运行代码案例

一、核心区别速览

二、详细特性拆解（附代码案例）

1. 变量提升与暂时性死区
   JS 代码执行分为编译阶段和执行阶段，变量提升发生在编译阶段。

• var：变量提升后默认赋值为 undefined，声明前访问不会报错。
• let / const：存在变量提升，但禁止声明前访问，形成暂时性死区（TDZ），直到声明语句执行完毕，死区结束。

// var 变量提升// var 变量提升console.log(a);// undefinedvara=10;// let/const 暂时性死区console.log(b);// Uncaught ReferenceError: Cannot access 'b' before initializationletb=20;console.log(c);// 同上报错constc=30;

2. 重复声明规则

• var：允许在同一作用域重复声明同名变量，会覆盖之前的值，无任何报错，极易引发隐蔽 bug。
• let / const：同一作用域内禁止重复声明同名变量，直接报错，代码更严谨。

// var 重复声明// var 重复声明varnum=1;varnum=2;console.log(num);// 2（无报错，直接覆盖）// let 重复声明letcount=1;letcount=2;// Uncaught SyntaxError: Identifier 'count' has already been declared// const 重复声明同理报错conststr="test";conststr="demo";// 语法报错

3. 赋值与修改特性

• var / let：属于可变变量，声明后可任意重新赋值。
• const：属于只读常量，必须声明时初始化赋值，且不允许整体重新赋值。
  重点误区：const 并非完全不可变，它仅保证变量的内存地址不变。如果是引用类型（数组、对象），可以修改内部属性和元素。

// 1. const 必须初始化consttest;// Uncaught SyntaxError: Missing initializer in const declaration// 2. 基本类型不可重新赋值constscore=100;score=99;// 报错：Assignment to constant variable// 3. 引用类型可修改内部数据constobj={name:"李四"};obj.age=20;// 合法：修改对象属性obj.name="王五";// 合法console.log(obj);// {name: '王五', age: 20}constarr=[1,2,3];arr.push(4);// 合法：修改数组内容console.log(arr);// [1,2,3,4]

三、企业级开发最佳实践
现代 Vue/React/原生项目中，彻底废弃 var，统一遵循以下规则：

1. 优先使用 const：绝大多数变量不会重新赋值（接口数据、常量配置、DOM 元素、函数、类），默认用 const，提升代码可读性和稳定性。
2. 按需使用 let：仅变量值会动态改变时使用（计数器、表单输入值、状态变量、循环变量）。
3. 绝对不用 var：规避全局污染、变量提升混乱、重复声明覆盖等所有隐性 bug。

四、总结

1. var：ES5 旧语法，函数作用域，无严谨性，存在诸多设计缺陷，现代项目已淘汰；
2. let：块级作用域，解决 var 核心问题，适用于值会变动的变量；
3. const：块级作用域，只读地址，性能更优、安全性更高，是默认首选声明方式；
4. 三者核心差异的本质：作用域机制 + 变量声明规则 + 内存绑定特性的全面升级。