摘要JavaScript 三种变量声明方式var、let、const是前端高频面试考点。本文结合思维导图梳理三者特性、区别理清变量提升、块级作用域、重复声明等核心知识点。一、前言在 ES5 时代只有var来声明变量存在很多设计缺陷。ES6 新增了let和const引入块级作用域解决了var带来的很多 bug。开发中现在基本推荐优先使用let、const少用或者不用var。下面对比三者核心特点。二、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不起约束块内声明的变量外部也可以访问容易造成变量污染。三、letES6 变量声明let用来声明可以修改的变量解决 var 大部分问题。不存在变量提升必须先声明再使用在声明之前调用会报错也就是常说的暂时性死区。console.log(b); // Uncaught ReferenceError let b 20;不能重复命名同一个作用域内不允许重复声明同一个变量名称直接报错。let c 10; let c 20; // 报错标识符已经声明支持块级作用域大括号{}if、for、while内部使用let变量只在这个块里面生效外部访问不到避免全局变量污染。四、constES6 常量声明const和let大部分规则一致专门用来声明常量。和let相同点拥有块级作用域不可以重复声明不存在变量提升存在暂时性死区声明的时候必须立刻赋值不能只声明不赋值const PI; // ❌报错缺少初始值 const PI 3.14; // ✅正确基本数据类型值不允许修改如果存储number、string、布尔这类原始类型一旦赋值就不能重新赋值修改。const name 张三; name 李四; // ❌报错常量不能修改引用类型 (数组、对象)可以修改内部内容const限制的是变量指向的地址不能改变对象、数组内部属性、元素可以修改只是不能直接重新赋值整个对象 / 数组。const arr [1,2,3]; arr.push(4); // ✅允许修改内部元素 arr [5,6]; // ❌报错不能直接重新赋值五、三者对比速查表特性varletconst变量提升✅有❌无❌无重复声明✅允许❌不允许❌不允许块级作用域❌无✅有✅有声明必须赋值❌不需要❌不需要✅必须修改值✅可修改✅可修改基本类型不可改引用类型内部可改六、开发使用建议尽量抛弃 var它没有块级作用域、变量提升、允许重复声明很容易出现难以排查的 bug。优先使用const只要确定变量不会重新赋值就用 const。只有后续需要重新修改变量值的时候才使用let。小结var是旧时代产物坑点较多let适合可变变量const适合常量。块级作用域、变量提升、暂时性死区、const 引用类型的特性是面试经常考察的地方尤其是 const 对象数组可以修改内部属性这点很容易踩坑。