JavaScript let 详解：let、var 与 const 的区别（初学者到中级指南）

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍

在 JavaScript 中，变量声明是编程中最基础的概念之一。近年来，var、let 和 const 三种不同的声明关键字已经被广泛使用，因而在不同情境下选择合适的关键字变得尤为重要。

本文聚焦关键词 “javascript let”，并清晰阐述 let 的特性与用法，以及它与 var、const 的区别。内容面向初学者到中级开发者，涵盖从基本概念到实际使用的全部要点。

我们的目标是帮助读者准确理解 何时以及为何使用 let，从而编写安全、高效且易于维护的 JavaScript 代码。

2. JavaScript 变量声明方式概览

在 JavaScript 中，变量用于临时存储数据。声明变量主要有三种关键字可供选择：

• var： 传统的变量声明方式，适用于较早的 JavaScript 版本
• let： ES6（ECMAScript 2015）引入的块级作用域变量声明
• const： 同样在 ES6 中引入的常量声明关键字

每个关键字都有不同的特性，因而需要根据用途和上下文选择合适的声明方式。

下面的表格概括了它们的基本特征：

如表所示，let 被广泛视为 支持块级作用域且允许重新赋值的灵活变量声明，适用于许多现代 JavaScript 场景。

3. let 是什么？—— 基本用法

let 是 ES6 中新增的变量声明关键字，主要具有以下特性。

1. 具备块级作用域
2. 允许重新赋值
3. 提升行为与 var 不同

3.1 let 的基本语法

下面的代码展示了使用 let 声明变量的基本方式。

let x = 10;  // Declare variable x and assign the value 10
x = 20;      // Reassignment is allowed
console.log(x); // Output: 20

从该示例可以看出，let 允许在声明后更改其值。这一点不同于 const，使得 let 适合用于灵活的数据管理。

3.2 块级作用域的特性

由于 let 具有 块级作用域，它仅在声明所在的代码块内部有效。

{
  let y = 30;  // Declared inside the block
  console.log(y); // Output: 30
}
console.log(y); // Error: y is not defined

如此一来，变量 y 在块外无法被引用，会导致错误。这有助于防止意外的全局污染，提升变量管理的安全性。

3.3 提升行为

let 会被 提升，但在声明之前访问会抛出错误。

console.log(z); // Error: Cannot access 'z' before initialization
let z = 50;

这种行为与 var 不同，后者在提升阶段会被初始化为 undefined。为避免错误，务必在声明之后再使用 let。

4. var 与 let 的区别

在 JavaScript 中，你可以使用 var 或 let 来声明变量，但两者之间存在若干重要差异。本节重点讨论 作用域、重新声明以及提升行为，并通过具体示例详细说明这些区别。

4.1 作用域差异

一个关键区别是 var 具有函数作用域，而 let 具有块级作用域。

函数作用域示例（var）

function exampleVar() {
  if (true) {
    var a = 10; // Variable declared inside the function
  }
  console.log(a); // Output: 10
}

exampleVar();

块级作用域示例（let）

function exampleLet() {
  if (true) {
    let b = 20; // Valid only within the block
  }
  console.log(b); // Error: b is not defined
}

exampleLet();

因为这种差异，let 更适合防止意外的变量重新定义或覆盖。

4.2 是否允许重新声明

var 可以在同一作用域内重新声明，但 let 不允许重新声明。

使用 var 的重新声明示例

var x = 10;
var x = 20; // Redeclaration is allowed without issues
console.log(x); // Output: 20

使用 let 的重新声明示例

let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared
console.log(y);

有了这个特性，let 有助于防止同一变量被意外声明多次的错误。

4.3 提升（Hoisting）差异

提升 是 JavaScript 的一种机制，变量和函数声明会被移动到其作用域的顶部。

使用 var 的提升示例

console.log(z); // Output: undefined
var z = 30;

使用 let 的提升示例

console.log(w); // Error: Cannot access 'w' before initialization
let w = 40;

4.4 使用总结

var 用于旧代码或需要向后兼容的情况，而 let 用于现代代码以实现更安全的作用域管理。

对比表

5. const 与 let 的区别

在 JavaScript 中，const 是另一种常用的变量声明方式，与 let 并列。本节将更深入地 比较 let 与 const 的差异，并说明如何恰当地使用它们。

5.1 什么是 const？

const 是 用于声明不可重新赋值变量的关键字。

基本语法

const pi = 3.14; // Declare a constant
pi = 3.14159;    // Error: Assignment to constant variable.

在此示例中，pi 的值在声明后不能被更改，尝试重新赋值会导致错误。

5.2 let 与 const 的区别

5.3 重新赋值与重新声明比较

let 的重新赋值示例

let count = 1;  // Initialization
count = 2;      // Reassignment is allowed
console.log(count); // Output: 2

const 的重新赋值示例

const maxCount = 10;
maxCount = 20; // Error: Assignment to constant variable.

如上所示，let 适用于处理会变化的值，而 const 最适合固定不变的值。

5.4 对象和数组的重要注意事项

虽然 const 阻止重新赋值，对象的属性和数组的元素仍然可以被修改。

对象示例

const user = { name: "Taro" };
user.name = "Jiro"; // Modifying properties is allowed
console.log(user.name); // Output: "Jiro"

user = { name: "Saburo" }; // Error: Reassignment is not allowed

数组示例

const numbers = [1, 2, 3];
numbers.push(4); // Adding elements is allowed
console.log(numbers); // Output: [1, 2, 3, 4]

numbers = [5, 6, 7]; // Error: Reassignment is not allowed

5.5 实际使用示例

应使用 const 的场景：

1. 永不改变的常量或值

   const TAX_RATE = 0.1;
   

2. 固定引用的对象或数组

   const CONFIG = {
     apiUrl: "https://example.com/api",
   };
   

应使用 let 的场景：

1. 需要动态变化的值

   let count = 0;
   count++;
   

2. 循环中递增的变量

   for (let i = 0; i < 10; i++) {
     console.log(i);
   }
   

6. 何时使用 let 以及关键考虑因素

JavaScript 提供了三种变量声明选项：var、let 和 const。其中，let 在特定情境下扮演着尤为有用的角色。

在本节中，我们将解释 何时应该使用 let 以及需要注意的关键要点。

6.1 let 的推荐使用场景

1. 需要块级作用域时 因为 let 具有 块级作用域，它可以在条件语句和循环中安全地管理变量。 示例：在条件块内部管理变量

   if (true) {
     let message = "Hello, World!";
     console.log(message); // Output: Hello, World!
   }
   console.log(message); // Error: message is not defined
   

2. 需要动态更新值时 const 不允许重新赋值，而 let 适用于值会动态变化的场景。 示例：循环内部的变量管理

   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total += i;
   }
   console.log(total); // Output: 15
   

3. 存储临时值时 对于仅在函数内部短暂使用的变量，let 能提升代码的可读性和可维护性。 示例：函数内部的局部变量

   function calculateDiscount(price) {
     let discount = 0.1; // Temporary discount rate
     return price * (1 - discount);
   }
   console.log(calculateDiscount(1000)); // Output: 900
   

6.2 使用 let 时的注意事项

1. 注意变量初始化 在变量声明之前访问 let 变量会导致错误。 示例：初始化前访问

   console.log(a); // Error: Cannot access 'a' before initialization
   let a = 10;
   

2. 了解提升行为 虽然 let 会被提升，但在 “暂时性死区（TDZ）” 内无法访问。 示例：TDZ 行为

   if (true) {
     console.log(b); // Error: Cannot access 'b' before initialization
     let b = 20;
   }
   

3. 注意作用域边界 在同一块内不能使用相同名称重新声明变量。 示例：重新声明错误

   let c = 10;
   let c = 20; // Error: Identifier 'c' has already been declared
   

4. 使用 let 避免全局污染 使用 var 会增加影响全局作用域的风险，而 let 有助于降低此风险。 示例：避免全局与局部变量冲突

   let d = 50; // Global variable
   function test() {
     let d = 30; // Local variable
     console.log(d); // Output: 30
   }
   test();
   console.log(d); // Output: 50
   

7. 常见问题解答（FAQ）

本节我们总结了与 JavaScript let 相关的常见问题及答案。通过具体示例解释实际关注点和常见问题的解决方案。

Q1：为什么要使用 let？

答：
let 推荐使用的原因如下。

1. 块级作用域： 因为 let 将变量作用域限制在块内，防止变量被意外覆盖。
2. 防止重新声明： 同一作用域内不允许重新声明，降低错误风险。
3. 提升安全性： let 在暂时性死区（TDZ）内会抛出错误，便于发现变量在声明前被访问的错误。

Q2：使用 var 会出现哪些问题？

答：
虽然 var 与旧代码兼容，但存在以下问题。

1. 作用域过宽： 因为只有函数作用域，块内声明的变量可能意外在块外可访问。

   if (true) {
     var x = 10;
   }
   console.log(x); // Output: 10
   

2. 允许重新声明： 这可能导致变量被意外覆盖。

   var y = 20;
   var y = 30; // Overwriting occurs
   

3. 提升行为： 使用 var 声明的变量会被初始化为 undefined，因此可以在声明之前访问它们。

   console.log(z); // Output: undefined
   var z = 50;
   

Q3：如何在 let 与 const 之间做选择？

答：
基本规则如下。

• const：当值不应改变或视为常量时使用。
• let：当值可能变化或需要动态更新时使用。

示例：

const TAX_RATE = 0.1;
let price = 1000;
price = price * (1 + TAX_RATE); // Price calculation

根据数据的性质选择合适的关键字可以使代码更具表现力且更易于理解。

Q4：在初始化之前访问 let 时导致 ReferenceError 的原因是什么？

答：
使用 let 声明的变量会被提升，但在“暂时性死区（TDZ）”内无法访问。

示例：

console.log(a); // Error: Cannot access 'a' before initialization
let a = 10;

解决方案：
将变量的声明和初始化放在一起，并且要特别注意代码顺序。

8. 结论

在本文中，我们全面阐述了 JavaScript 变量声明中的 let。我们覆盖了基本用法、与 var 和 const 的区别、实际示例以及常见问题的解答。

以下是对所讨论关键点的简要总结。

8.1 let 的关键特性

1. 具有块级作用域：

• let 仅在块（{}）内部有效。
• 这可以防止意外的变量覆盖。

1. 允许重新赋值：

• 适用于值会动态变化的循环和条件逻辑。

1. 不允许重新声明：

• 通过防止重复声明提升代码安全性。

1. 提升行为：

• 声明会被提升，但在初始化之前访问变量会因 TDZ 而导致错误。

8.2 与其他声明方式的比较

8.3 let 的最佳使用场景

let 在以下场景中特别有效。

• 条件语句和循环： 当值动态变化时使用。

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  

• 函数内部的局部变量： 适合存储临时值。

  function calculateTotal(price) {
    let discount = 0.1;
    return price * (1 - discount);
  }
  

• 动态状态管理： 当值根据用户输入或应用状态变化时很有用。

  let userInput = prompt("Please enter your name:");
  console.log(`Hello, ${userInput}!`);
  

8.4 最佳实践与注意事项

1. 避免在声明之前访问变量： 提前声明变量以防止提升相关错误。
2. 优先使用 const，仅在需要重新赋值时使用 let： 这可以提升代码的清晰度和安全性。
3. 注意作用域管理： 始终考虑变量作用域，以避免意外访问或冲突。

8.5 最终总结

let 是现代 JavaScript 编程中灵活且安全的变量声明选择。

• 仅在遗留代码中使用 var；在新项目中更倾向于使用 let 或 const。
• 对会变化的值使用 let，对固定值使用 const，以提升可读性和可靠性。

8.6 下一步

通过实际代码实验来运用所学内容。以下主题也可作为下一步学习的参考。

1. JavaScript 数据类型与类型转换 – 加深对数据管理的理解。
2. 函数与作用域深入探讨 – 掌握高级作用域控制和函数设计。
3. ES6 及以后特性的概览 – 探索现代 JavaScript 的功能。