在 JavaScript 中，变量声明的作用域一直都是函数级的，这意味着变量只能在当前函数作用域内使用。但是在 ES6 中，引入了块级作用域，这让变量的作用域除了函数外，还可以是一个块级内部。
什么是块级作用域？
在 JavaScript 中，块级作用域是指由一对花括号 {} 所包裹的语句集合。ES6 中新增了 let 和 const 关键字来声明块级作用域内的变量和常量。
if (true) {
let a = 10;
const b = 20;
}在这个例子中，变量 a 和常量 b 都是在 if 块级作用域内声明的。
块级作用域的优势
避免变量污染
在函数级作用域中，变量会被声明提升并绑定到整个函数作用域内。这意味着变量可能会意外地被其他代码所修改，这就是所谓的“变量污染”。
-- -------------------- ---- ------- --- - - --- -------- ----- - --------------- -- --------- --- - - --- - ------ --------------- -- --
在上面的例子中，由于变量提升的影响，函数内的 x 变量会被覆盖掉，导致在 foo 函数内部调用 console.log(x) 输出 undefined。为了避免这个问题，我们可以将 x 变量放在块级作用域中。
-- -------------------- ---- -------
--- - - ---
-------- ----- -
-- ------ -
--- - - ---
--------------- -- --
-
-
------
--------------- -- --在这个例子中，我们将变量 x 声明在 if 块级作用域中，这样就不会影响到函数级作用域内的 x 变量。
让代码更具可读性和可维护性
使用块级作用域可以更好地组织代码，让代码更具可读性和可维护性。我们可以使用块级作用域来限制变量的作用范围，这样可以使代码更加清晰。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i); // ReferenceError: i is not defined在这个例子中，我们使用 let 声明了变量 i，并将它限制在了 for 循环块级作用域中。在循环执行完后，我们无法在外部访问 i 变量，从而保证了代码的可维护性和安全性。
const 可以保证变量不被修改
在 ES6 中，我们可以使用 const 关键字来声明常量。常量和变量的区别在于常量的值赋值后就不能改变。
const PI = 3.14159; PI = 3; // TypeError: Assignment to constant variable.
在上面的例子中，我们将 PI 常量的值赋成了 3.14159，并试图在之后将其赋值成 3。由于 PI 是一个常量，所以在运行时会抛出 TypeError 异常。
使用 const 声明变量可以保证变量不会被修改，这可以避免一些潜在的问题。例如，我们可以使用 const 来声明一个永远不会被修改的变量：
const MAX_VALUE = 100;
这样可以避免意外地修改 MAX_VALUE 的值。
总结
ES6 中的块级作用域可以避免变量污染，让代码更具可读性和可维护性。使用 const 可以保证变量不被修改，这可以避免一些潜在的问题。如果你想写出更加简洁、可读性和可维护性的代码，那么使用块级作用域是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648daea848841e9894c06e5a