ES6：三分钟速通let var 与 const我们要了解他们，就不能只了解他们。 let 与 var 相同点声明变量

我们要了解他们，就不能只了解他们。

`let` 与 `var`

相同点

声明变量：无论是let还是var，它们的基本功能都是用来声明变量。

区别

作用域：
- var：支持函数作用域和全局作用域。在函数内部声明的var变量仅在该函数内部可见；在全局范围内声明的var变量则在整个程序中都可见。
- let：支持块级作用域。这意味着使用let声明的变量只在其所在的大括号 {} 内有效。例如，在if语句、for循环或任何其他代码块中声明的let变量，只在这个代码块内可见。
提升（Hoisting） ：
- var：变量会被提升至其作用域的顶部，但其初始化不会。这意味着在声明之前访问var声明的变量会得到undefined。
- let：同样存在提升现象，但在实际声明前处于一个“暂时性死区”(Temporal Dead Zone, TDZ)，在此期间尝试访问这些变量会导致引用错误。
重复声明：
- var：允许在同一作用域内多次声明同一个变量。
- let：不允许在同一作用域内重复声明同一个变量。

`const` 变量

常量：const用于声明常量，即一旦赋值后就不能再改变。这有助于防止意外地修改数据，增加代码的健壮性和可预测性。
块级作用域：const也支持块级作用域，与let类似，只在其所在的大括号 {} 内有效。
命名规范：虽然不是强制要求，但通常建议将const声明的常量名称使用大写字母，以表示其不可变性。
复杂数据类型：对于对象或数组类型的const变量，虽然不能直接重新赋值给该变量，但可以修改其属性或元素。需要注意的是，const只是防止重新赋值，而不是冻结对象的状态。

示例

const person = { name: 'Alice' };
person.name = 'Bob'; // 合法，修改对象属性
// person = { name: 'Charlie' }; // 错误，尝试重新赋值

const numbers = [1, 2, 3];
numbers.push(4); // 合法，修改数组元素
// numbers = [1, 2, 3, 4]; // 错误，尝试重新赋值

变量的作用域

全局作用域

在全局范围内声明的变量，可以在整个程序中访问。这种变量通常用于存储应用程序的全局状态或配置信息。

局部作用域

函数作用域：在函数内部声明的变量，只能在该函数内部访问。这是var支持的作用域。
块级作用域：
- 使用let和const声明的变量，只在其所在的大括号 {} 内有效。这种作用域可以更细粒度地控制变量的可见性，减少变量污染和意外的副作用。

示例

function example() {
  if (true) {
    var functionScoped = 'I am function-scoped';
    let blockScoped = 'I am block-scoped';
    const constant = 'I am a constant';
  }
  console.log(functionScoped); // 输出: I am function-scoped
  // console.log(blockScoped); // 报错: blockScoped is not defined
  // console.log(constant); // 报错: constant is not defined
}

example();

最佳实践

优先使用const：除非需要一个可以在后续代码中更改的变量，否则应优先使用const。这有助于防止意外地修改数据，提高代码的可读性和可维护性。
避免使用var：除非你需要特定于旧版浏览器的行为或者正在维护遗留代码，否则应避免使用var。let和const提供了更好的作用域控制和代码安全性。
块级作用域：利用let和const的块级作用域特性，可以更精确地控制变量的可见性和生命周期，减少变量污染和意外的副作用。

结论

ES6引入的let和const不仅解决了var带来的许多问题，还为JavaScript开发者提供了更强大和灵活的工具。通过使用let来声明可变变量，使用const来定义不可变常量，开发者可以编写出更加清晰、安全且易于维护的代码。随着ES6标准的普及，推荐在新项目中优先考虑使用let和const代替传统的var。

希望本文能够帮助你快速掌握let与const之间的关键区别，以及变量作用域的概念，从而在实际开发中写出更高质量的JavaScript代码。

ES6：三分钟速通let var 与 const