JavaScript Let 块级作用域

JavaScript Let 学习手记

最近在学习 JavaScript ES6 (2015) 标准时，我发现了let这个关键字，它为声明变量提供了一种新的方式，而且这种方式具有块级作用域的特点，真的很有趣呢！

理解块作用域

在 ES6 之前的版本中，JavaScript 的变量作用域只有全局和函数两种。但自从有了let和const，JavaScript 就开始支持块级作用域了。这意味着变量或常量的可见性只限于声明它们的代码块内，这让代码更加清晰和易于管理。

我试了试用let声明变量，并修改了变量的值，使其更易读和实用：

if (true) {
  let temperature = 25; // 温度在这个 if 语句块里有效
  console.log(`The temperature inside the block is ${temperature}°C.`);
}

// 报错示例
try {
  console.log(`The temperature outside the block is ${temperature}°C.`); // 报错：temperature is not defined
} catch (error) {
  console.error("Error:", error.message);
}

而用var声明的变量就不一样了：

if (true) {
  var isRaining = true; // isRaining 在 if 语句块外面也有效，因为它的作用域被提升到了全局
  console.log(`It's raining inside the block: ${isRaining}`);
}

console.log(`It's raining outside the block: ${isRaining}`); // 输出了 It's raining outside the block: true

不重复声明

我还发现，在同一个作用域内，let不允许重复声明同一个变量。这样可以减少因为重复声明而导致的错误，让代码更加健壮。

尝试重复声明的错误示例：

let daysInWeek = 7;

// 下面的代码会抛出 SyntaxError
try {
  let daysInWeek = 8; // 错误！不能在同一作用域内重新声明 let 变量
} catch (error) {
  console.error("Error:", error.message); // SyntaxError: Identifier 'daysInWeek' has already been declared
}

但是var就可以重复声明，只是后面的声明会覆盖前面的。

避免变量被意外覆盖

使用let可以更好地控制变量的作用域，避免内层作用域的变量不小心覆盖外层作用域的变量。

比如这个例子：

let city = "New York";

if (true) {
  let city = "San Francisco"; // 这里的 city 是新的变量，不会影响到外面的 city
  console.log(`Inside the block, the city is ${city}.`); // 输出了 Inside the block, the city is San Francisco.
}

console.log(`Outside the block, the city is ${city}.`); // 输出了 Outside the block, the city is New York.

对比 var、let 和 const

为了更好地理解这三个关键字的区别，我整理了一个简单的对比表格：

关键字	作用域	是否可重复声明	是否可重新赋值	变量提升	暂时性死区	全局作用域绑定
var	函数或全局	可以	可以	是	无	是（全局对象的属性）
let	块级	不可以	可以	否（有暂时性死区）	有	否
const	块级	不可以	不可以（指向不变，但内容可变，如对象和数组）	否（有暂时性死区）	有	否

一些实用的建议

因为let和const提供了更严格的作用域控制和更安全的声明机制，所以在现代的 JavaScript 开发中，我们通常会使用它们来替代var。

浏览器支持情况

需要注意的是，一些较旧的浏览器（比如 Internet Explorer 11 及以下版本）不支持let和const。如果需要在这些浏览器上运行代码，可以使用一些工具比如 Babel 来将 ES6+ 代码转换成 ES5 代码，或者使用其他传统的变量声明方式。