这是 JS 基础最核心、面试必问的知识点我用最简单、最清晰的方式给你总结只记关键区别就行。一句话总结var旧语法无块级作用域、可重复声明、会变量提升尽量别用let新语法有块级作用域、不可重复声明、存在暂时性死区用于变量const新语法和 let 规则一致但必须初始化、不能重新赋值用于常量1. 作用域最核心区别var函数级作用域没有块级作用域{}限制不住它let / const块级作用域if / for / while {}里声明外面访问不到js// var 不受 {} 限制 if (true) { var a 10; } console.log(a); // 10 ✅ 能访问 // let/const 受 {} 限制 if (true) { let b 20; } console.log(b); // ❌ 报错b is not defined2. 重复声明var可以重复声明后面覆盖前面let / const同一作用域内不能重复声明直接报错jsvar x 1; var x 2; // ✅ 不报错 let y 1; let y 2; // ❌ 报错重复声明3. 变量提升 暂时性死区var会变量提升可以先使用后声明值为undefinedlet / const也会提升但不能在声明前使用暂时性死区 TDZjsconsole.log(num); // undefined ✅var 提升 var num 10; console.log(name); // ❌ 报错let 存在暂时性死区 let name zs;4. 赋值与修改const 特殊var / let可以先声明后赋值也可以随时修改值const必须声明时初始化不能只声明不赋值基本类型不能改值引用类型可以改内部属性js// 错误示范 const age; // ❌ 必须赋值 // 正确示范 const PI 3.14; PI 3.1415; // ❌ 基本类型不能改 // 引用类型对象/数组可以改内部不能改指向 const user { name: zs }; user.name ls; // ✅ 可以改 user {}; // ❌ 不能重新赋值5. 全局声明挂载 windowvar在全局声明会挂载到 window 对象let / const不会挂载到 windowjsvar a 10; console.log(window.a); // 10 ✅ let b 20; console.log(window.b); // undefined ❌终极记忆表表格特性varletconst作用域函数级块级块级重复声明允许不允许不允许变量提升有 (undefined)有 (TDZ 禁止访问)有 (TDZ 禁止访问)重新赋值允许允许不允许必须初始化不需要不需要必须全局挂载 window是否否最佳实践工作中直接照做默认用 const大部分值不需要改更安全需要变的用 let循环、计数器、变量彻底放弃 varES6 之后无任何使用场景总结var旧、无块级作用域、不安全let变量专用块级作用域可修改const常量专用块级作用域必须初始化、不能重新赋值我可以给你出 3 道经典面试题帮你彻底巩固这个知识点需要吗块级作用域的应用场景有哪些块级作用域let/const实用应用场景块级作用域{ }内独立作用域外部访问不到内部变量1. for 循环经典场景最常用解决var循环变量泄露、定时器取值错乱问题js// 错误 var全取最后值 for(var i0;i3;i){ setTimeout(()console.log(i)) // 全输出3 } // 正确 let每次循环生成独立块级作用域 for(let i0;i3;i){ setTimeout(()console.log(i)) // 0 1 2 }2. 分支语句隔离变量if /else/switchif 内部变量不会跑到全局避免变量污染jsif(true){ let msg 成功; } console.log(msg) // 报错外部访问不到3. 临时代码块隔离变量单独{}划分临时作用域用完即销毁js{ let temp 123; console.log(temp); } // temp 不存在不污染外层变量4. 防止变量命名冲突同一页面 / 函数内同名变量互不干扰js// 第一段逻辑 { let num 10; } // 第二段逻辑 { let num 20; // 互不冲突 }5. 函数内部局部临时变量函数里拆分逻辑块各自私有变量jsfunction fn(){ // 逻辑1 {let a1} // 逻辑2 {let a2} }6. 循环嵌套互不干扰多层 for 循环变量不串值jsfor(let i0;i2;i){ for(let j0;j2;j){ // i、j 各自独立 } }7. 避免全局变量泛滥不用闭包也能私有化变量替代旧时代 IIFE 立即执行函数js// 旧写法IIFE 模拟块级 (function(){var a1})() // 新写法 直接{} let/const {let a1}8. 解构赋值、临时常量隔离接口数据临时解析用完销毁js{ const {name,age} res.data; // 仅块内使用 }核心好处杜绝变量污染循环取值正常同名变量不冲突代码逻辑分区清晰淘汰 var代码更严谨一句话使用原则只要变量只想在{}里用就用 let/const 开启块级作用域
