JavaScript 中的变量声明

在2015年之前，声明变量的唯一关键字是 var。随着JavaScript ES6的推出，新增了两个关键字：const 和 let。下面我们来看看这三个关键字之间的区别，以及在什么情况下应该使用它们。

尽管这些变量声明方式并非React特有，但对于刚接触React的新手来说，可能会感到困惑。这或许是因为JavaScript ES6发布时，React已经变得非常流行。通常我会在我的工作坊中尽早引入 let 和 const。最简单的做法就是将React组件中的 var 替换为 const：

此外，在ES6之前，JavaScript并没有专门用于声明常量的关键字，因此引入了 const。使用 const 声明的变量是只读的，意味着一旦初始化后，就不能再被重新赋值。

### var、let 和 const 的作用域 引入 `let` 和 `const` 的主要原因是让开发者能够更精确地控制变量的作用域。三者的具体作用域如下： - `var`：变量所在的函数作用域 - `let`：变量所在的块级作用域 - `const`：变量所在的块级作用域 > *块级作用域指的是使用 if 语句、for 循环或大括号 `{}` 包裹的代码区域。* 运行以下示例，观察结果： <pre><code class=language-javascript>function foo(){ for (var i=0; i<5 ; i++){ console.log(i); } console.log(i); } foo();</code></pre> 如果将 `var` 替换为 `let`，再次运行代码，将会出现错误 `ReferenceError: i is not defined`。这说明 `i` 变量仅在大括号内部有效，外部无法访问。

使用建议：

• 不要使用 var，因为 let 和 const 更具明确性
• 默认使用 const，因为它不能被重新赋值或重新声明
• 当未来需要重新赋值时，才使用 let
• 优先选择 let 而不是 var，优先选择 const 而不是 let

### 何时使用哪种？ 通常在 `for` 循环中使用 `let` 来递增循环计数器，而 `const` 则用于声明那些不应改变的变量。虽然使用 `const` 声明的对象或数组的内部属性仍可修改，但这种声明方式表达了“该变量不应被重新赋值”的意图。