前端必考点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存在变量提升默认值 undefinedJS 执行时会把 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。