前端必考点：var、let、const 作用域、变量提升与使用场景
前言
在 JavaScript 中，var、let、const是三种声明变量的关键字，var为 ES5 旧语法，let、const是 ES6 新增。很多开发新手分不清三者作用域、变量提升、重复声明规则，日常开发频繁出现变量污染、报错、常量被篡改等问题。本文从作用域、变量提升、重复声明、赋值规则、使用场景五大维度完整对比，附带实操案例，看完彻底分清三者差异。
一、作用域差异
1. var：函数作用域，无块级作用域
var仅区分函数，if、for、while 等代码块不会限制 var 变量，块内声明可在块外访问，极易造成全局变量污染。
if(true){ var a = 10 } console.log(a) // 10，块外可访问 function fn(){ var b = 20 } console.log(b) // 报错，函数外无法访问2. let /const：块级作用域
let、const拥有块级作用域（{}包裹区域），if、for、循环、判断块内声明，块外无法读取，有效隔离变量。
if(true){ let c = 30 const d = 40 } console.log(c) // 报错 console.log(d) // 报错二、变量提升
1. var：存在变量提升，默认值 undefined
JS 执行时会把 var 声明提升到当前作用域顶部，声明前访问不会报错，返回undefined。
console.log(num) // undefined var num = 1002. let /const：存在提升，但有暂时性死区
let、const同样会提升，但在声明代码前属于暂时性死区，访问直接抛出报错，杜绝先使用后定义的不规范写法。
console.log(x) // Uncaught ReferenceError let x = 200三、重复声明规则
- var：允许同一作用域重复声明，不会报错，会覆盖原有值
var m = 1 var m = 2 console.log(m) // 22. let /const：同一作用域禁止重复声明，直接报错
let n = 1 let n = 2 // 报错四、赋值与修改规则（let 和 const 最大区别）
1. var、let：可重复修改赋值
声明后能多次重新赋值，变量值可变：
let age = 18 age = 20 // 合法2. const：常量，声明时必须赋值，不可直接重写
- 声明时必须初始化，不能只声明不赋值
- 基础数据类型（数字、字符串、布尔）无法修改
- 引用类型（数组、对象）地址不变即可修改内部属性
// 错误写法 const name; // 基础类型不可改 const PI = 3.14 PI = 3.1415 // 报错 // 对象/数组可修改内部数据 const arr = [1,2,3] arr.push(4) // 合法，数组引用地址未变五、总结
- 区分作用域：var 只有函数作用域，let/const 有块级作用域；
- 区分提升：var 无暂时性死区，let/const 有 TDZ，先使用直接报错；
- 区分修改：let 可反复赋值，const 为常量，基础类型不可修改；
- 开发规范：const > let > var，新项目不再使用 var。
