在 JavaScript 中，变量是编程中最基本的概念之一。ES11 中引入了两种新的变量声明方式：let 和 const。虽然这些变量声明方式在一些方面与 var 相似，但它们之间也有很大的差异。在本文中，我们将详细探讨这些变量声明方式，帮助前端开发者更好地理解它们，以便正确地使用它们。
Var
在 ES6 之前，var 是 JavaScript 中唯一的变量声明方式。它是最基本的声明变量的方式之一。var 声明的变量通常使用在函数作用域中，并且有变量提升的机制。这意味着即使在变量声明前使用一些变量，也不会报错，而是会返回 undefined。例如：
--------------- -- -- --------- --- - - --
此时的变量提升意味着变量 a 已经被声明并且存储在内存中，只是还没有被赋值。
而且，在函数范围内，var 声明的变量是可以被访问的，即使在声明之前。在以下代码中，内部函数可以访问到外部函数中声明的变量 a。
-------- --------------- -
--- - - --
-------- ---------------- -
--------------- ---- -
-
-----------------
-
----------------另外，var 声明的变量是可重新赋值的，这也是它与 const 和 let 的重要区别之一。
Let
let 是一个块级作用域变量。这意味着在一个 {} 内声明的变量是不能从 {} 外使用的。let 声明的变量不能被提升，也就是说，如果在变量声明之前使用它，会抛出 ReferenceError。例如：
--------------- -- -- -------------- ---- ----- --- - - --
在以下示例代码中，内部的变量 a 不能被外部使用：
--- - - -- - --- - - -- - --------------- -- -- -
在 ES5 中，为了避免变量冲突，有时需要使用闭包将变量封装在一个块或函数范围内。let 的出现，这些方法变得简单。以下示例代码演示：
--- - - -- ----------- - --- - - -- --------------- -- -- - ----- - --- - - -- --------------- -- -- - - --------------- -- -- -
Const
const 声明的变量也是块级作用域变量。与 let 不同，const 声明的变量不能被重新赋值。这意味着一旦 const 声明一个变量，它将保持固定的值。例如：
----- - - -- - - -- -- -- --------- ---- ----
需要注意的是，const 声明的变量引用的值不能被修改。然而，如果引用的是一个对象或数组，那么它的属性可以被修改。例如：
----- --- - - -- - -- ----- - -- ------------------- -- -- -
结论
在实际项目中，应该优先使用 let 和 const 声明变量，而不是 var。let 和 const 可以增加代码的可读性和可维护性，并且有助于避免一些常见的 JavaScript 问题。虽然 let 和 const 有许多不同的相似之处，但在它们的使用上还是存在重要的区别。
值得注意的是，在使用变量时，应该始终考虑其适当的作用域，并且正确做出决策。这样才能产生更强大、更可靠的代码。
参考
- 阮一峰，let 和 const 命令。https://es6.ruanyifeng.com/?search=let+%E5%92%8C+const&x=0&y=0#docs/let
- MDN，let。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
- MDN，const。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671773c0ad1e889fe221ab78