块级作用域的应用场景有哪些？

这是 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 defined

2. 重复声明

• var：可以重复声明，后面覆盖前面
• let / const：同一作用域内不能重复声明，直接报错

js

var x = 1; var x = 2; // ✅ 不报错 let y = 1; let y = 2; // ❌ 报错：重复声明

3. 变量提升 & 暂时性死区

• var：会变量提升，可以先使用后声明（值为undefined）
• let / const：也会提升，但不能在声明前使用（暂时性死区 TDZ）

js

console.log(num); // undefined ✅（var 提升） var num = 10; console.log(name); // ❌ 报错（let 存在暂时性死区） let name = "zs";

4. 赋值与修改（const 特殊）

• var / let：可以先声明后赋值，也可以随时修改值
• const：
  1. 必须声明时初始化（不能只声明不赋值）
  2. 基本类型不能改值，引用类型可以改内部属性

js

// 错误示范 const age; // ❌ 必须赋值 // 正确示范 const PI = 3.14; PI = 3.1415; // ❌ 基本类型不能改 // 引用类型（对象/数组）：可以改内部，不能改指向 const user = { name: "zs" }; user.name = "ls"; // ✅ 可以改 user = {}; // ❌ 不能重新赋值

5. 全局声明（挂载 window）

• var：在全局声明，会挂载到 window 对象
• let / const：不会挂载到 window

js

var a = 10; console.log(window.a); // 10 ✅ let b = 20; console.log(window.b); // undefined ❌

终极记忆表

表格

最佳实践（工作中直接照做）

1. 默认用 const（大部分值不需要改，更安全）
2. 需要变的用 let（循环、计数器、变量）
3. 彻底放弃 var（ES6 之后无任何使用场景）

总结

• var：旧、无块级作用域、不安全
• let：变量专用，块级作用域，可修改
• const：常量专用，块级作用域，必须初始化、不能重新赋值

我可以给你出 3 道经典面试题，帮你彻底巩固这个知识点，需要吗？

块级作用域的应用场景有哪些？

块级作用域（let/const）实用应用场景

块级作用域：{ }内独立作用域，外部访问不到内部变量

1. for 循环经典场景（最常用）

解决var循环变量泄露、定时器取值错乱问题

js

// 错误 var：全取最后值 for(var i=0;i<3;i++){ setTimeout(()=>console.log(i)) // 全输出3 } // 正确 let：每次循环生成独立块级作用域 for(let i=0;i<3;i++){ setTimeout(()=>console.log(i)) // 0 1 2 }

2. 分支语句隔离变量（if /else/switch）

if 内部变量不会跑到全局，避免变量污染

js

if(true){ let msg = "成功"; } console.log(msg) // 报错，外部访问不到

3. 临时代码块隔离变量

单独{}划分临时作用域，用完即销毁

js

{ let temp = 123; console.log(temp); } // temp 不存在，不污染外层变量

4. 防止变量命名冲突

同一页面 / 函数内，同名变量互不干扰

js

// 第一段逻辑 { let num = 10; } // 第二段逻辑 { let num = 20; // 互不冲突 }

5. 函数内部局部临时变量

函数里拆分逻辑块，各自私有变量

js

function fn(){ // 逻辑1 {let a=1} // 逻辑2 {let a=2} }

6. 循环嵌套互不干扰

多层 for 循环变量不串值

js

for(let i=0;i<2;i++){ for(let j=0;j<2;j++){ // i、j 各自独立 } }

7. 避免全局变量泛滥

不用闭包也能私有化变量，替代旧时代 IIFE 立即执行函数

js

// 旧写法（IIFE 模拟块级） (function(){var a=1})() // 新写法 直接{} + let/const {let a=1}

8. 解构赋值、临时常量隔离

接口数据临时解析，用完销毁

js

{ const {name,age} = res.data; // 仅块内使用 }

核心好处

1. 杜绝变量污染
2. 循环取值正常
3. 同名变量不冲突
4. 代码逻辑分区清晰
5. 淘汰 var，代码更严谨

一句话使用原则

只要变量只想在{}里用，就用 let/const 开启块级作用域