在 JavaScript 中，作用域是指变量可以被访问的范围。在 ES6 之前，JavaScript 的作用域规则比较简单，只有全局作用域和函数作用域。但是在ES6 中引入了 const 和 let 关键字，使得变量的作用域更加精细化。在本文中，我们将详细讲解如何使用 const 和 let 避免变量作用域问题。
作用域和传统方式的问题
JavaScript 的传统作用域有两种，全局作用域和函数作用域。全局作用域下的变量可以被整个文件中的任何函数访问到。而函数作用域下的变量只能被当前函数和函数内部嵌套的函数访问到，无法被其他函数访问到。
例如：
-- -------------------- ---- ------- --- --- - --- -------- ----- - ----------------- - -------- ----- - --- --- - --- ------ - ------ -- ------ --
以上代码中，num 变量在全局作用域下，被 foo 函数访问到。bar 函数定义了一个同名的局部变量 num，但是在调用 foo 函数时，foo 函数访问到的是全局变量 num，输出的是 10，而不是 20。
这种作用域的规则容易导致变量的冲突和混淆，难以维护和调试。
const 和 let 的作用域
ES6 引入了 const 和 let 关键字，可以用来声明变量。它们可以解决传统作用域的问题，使得变量的作用域更加精细化。
let 声明的变量拥有块级作用域，只在当前块内部生效。块是用花括号括起来的一段代码。
例如：
-- -------------------- ---- -------
--- --- - ---
-------- ----- -
--- --- - ---
-- ------ -
--- --- - ---
----------------- -- ------ --
-
----------------- -- ------ --
-
------
----------------- -- ------ --以上代码中，num 变量在全局作用域下，被 foo 函数访问到。foo 函数内部定义了两个局部变量 num，在 if 块内部的 num 变量只在 if 块内部有效，不会影响到外部的 num 变量，使得变量的作用域更加精细化。
const 声明的变量也拥有块级作用域，但是必须在声明时初始化，并且不能再次赋值给另一个值。
例如：
-- -------------------- ---- -------
----- --- - ---
-------- ----- -
----- --- - ---
-- ------ -
----- --- - ---
----------------- -- ------ --
-
----------------- -- ------ --
-
------
----------------- -- ------ --以上代码中，num 变量被 const 声明，不允许再次赋值给另一个值。
示例代码
-- -------------------- ---- -------
-- -- ----- ----
----- -- - --------
-- -- --- ------
-------- ------------------ -
--- ---- - -- - ------ - -------
------ -----
-
--------------------------- -- ------ -----------------
-
--- - - ---
-
--- - - ---
--------------- -- ------ --
--------------- -- ------ --
-
--------------- -- ------ --
--------------- -- --------------- - -- --- -------
-
-
----- -- - --------
----- ------ - -
------- --
--- ------ -
------ -- - ----------- - ------------
--
--
------------------------- -- ------ -----------------
-以上代码中，使用 const 声明常量 PI，并且使用 let 声明局部变量 area。在两个块级作用域中，使用 let 声明局部变量 a 和 b，以及使用 const 声明常量 PI 和对象字面量 circle，其中 area 属性的值是使用 PI 和 radius 计算而来的。
总结
ES6 中的 const 和 let 关键字可以解决变量作用域的问题，使得变量的作用域更加精细化。使用 const 声明的变量不能再次赋值，使用 let 声明的变量可以重新赋值。使用 const 和 let 声明的变量都拥有块级作用域，只在当前块内部生效。在编写 JavaScript 代码时，我们应该养成使用 const 和 let 的习惯，以避免变量的冲突和混淆。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486aa1048841e98945325cb