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

📅 2026/7/9 12:12:08
JS 中 var、let、const 的核心区别
在 JavaScript 变量声明中var、let、const 是三种核心声明方式。其中 var 是 ES5 及之前的旧语法let、const 是 ES6 新增的块级作用域声明语法。本文将从变量提升、重复声明、赋值特性、三大核心维度拆解搭配可运行代码案例一、核心区别速览特性varletconst变量提升支持初始值为 undefined支持存在暂时性死区支持存在暂时性死区重复声明允许不允许同作用域不允许同作用域重新赋值允许允许不允许只读常量初始赋值可声明不赋值可声明不赋值必须初始化赋值二、详细特性拆解附代码案例变量提升与暂时性死区JS 代码执行分为编译阶段和执行阶段变量提升发生在编译阶段。var变量提升后默认赋值为 undefined声明前访问不会报错。let / const存在变量提升但禁止声明前访问形成暂时性死区TDZ直到声明语句执行完毕死区结束。// var 变量提升// var 变量提升console.log(a);// undefinedvara10;// let/const 暂时性死区console.log(b);// Uncaught ReferenceError: Cannot access b before initializationletb20;console.log(c);// 同上报错constc30;重复声明规则var允许在同一作用域重复声明同名变量会覆盖之前的值无任何报错极易引发隐蔽 bug。let / const同一作用域内禁止重复声明同名变量直接报错代码更严谨。// var 重复声明// var 重复声明varnum1;varnum2;console.log(num);// 2无报错直接覆盖// let 重复声明letcount1;letcount2;// Uncaught SyntaxError: Identifier count has already been declared// const 重复声明同理报错conststrtest;conststrdemo;// 语法报错赋值与修改特性var / let属于可变变量声明后可任意重新赋值。const属于只读常量必须声明时初始化赋值且不允许整体重新赋值。重点误区const 并非完全不可变它仅保证变量的内存地址不变。如果是引用类型数组、对象可以修改内部属性和元素。// 1. const 必须初始化consttest;// Uncaught SyntaxError: Missing initializer in const declaration// 2. 基本类型不可重新赋值constscore100;score99;// 报错Assignment to constant variable// 3. 引用类型可修改内部数据constobj{name:李四};obj.age20;// 合法修改对象属性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统一遵循以下规则优先使用 const绝大多数变量不会重新赋值接口数据、常量配置、DOM 元素、函数、类默认用 const提升代码可读性和稳定性。按需使用 let仅变量值会动态改变时使用计数器、表单输入值、状态变量、循环变量。绝对不用 var规避全局污染、变量提升混乱、重复声明覆盖等所有隐性 bug。四、总结varES5 旧语法函数作用域无严谨性存在诸多设计缺陷现代项目已淘汰let块级作用域解决 var 核心问题适用于值会变动的变量const块级作用域只读地址性能更优、安全性更高是默认首选声明方式三者核心差异的本质作用域机制 变量声明规则 内存绑定特性的全面升级。