红宝书第二讲：JavaScript变量声明：var、let、const详解

资料取自《JavaScript高级程序设计（第5版）》。 查看所有教程：红宝书学习大纲

一、var：旧时代的变量声明

1. 函数作用域

   • var声明的变量属于整个函数，在块（如{}、if、for）中可能“溢出”到外部：

     javascript
      代码解读
     复制代码
     function example() {
         if (true) {
             var a = 10; // 变量a属于整个函数作用域
         }
         console.log(a); // 输出10（正常访问）[^3]
     }
     

2. 允许重复声明

   • 同名变量重复声明不会报错（容易导致意外覆盖）：

     javascript
      代码解读
     复制代码
     var x = 5;
     var x = 6; // 合法，x的值被覆盖为6[^3]
     

3. 变量提升（Hoisting）

   • var变量在代码执行前会被提升到作用域顶部：

     javascript
      代码解读
     复制代码
     console.log(b); // 输出undefined（不会报错）
     var b = 100;    // 变量提升，但赋值留在原地
     

二、let：块级作用域的救星

1. 块级作用域

   • let声明的变量仅在当前块（如{}、if、for）内有效：

     javascript
      代码解读
     复制代码
     if (true) {
         let y = 20; 
     }
     console.log(y); // 报错：y未定义[^3][^2]
     

2. 禁止重复声明

   • 同一个块中不可重复声明同名变量：

     javascript
      代码解读
     复制代码
     let z = 5;
     let z = 6; // 报错：Identifier 'z' already declared[^3]
     

3. 暂时性死区（Temporal Dead Zone）

   • let变量在声明前不可访问：

     javascript
      代码解读
     复制代码
     console.log(c); // 报错：Cannot access 'c'...
     let c = 30;     // 变量c在声明前处于“死区”[^4]
     

4. 循环中的正确使用

   • for循环中使用let每次迭代绑定新变量，避免错误：

     javascript
      代码解读
     复制代码
     for (let i = 0; i < 3; i++) {
         setTimeout(() => console.log(i), 0); // 输出0、1、2（正确）[^2][^6]
     }
     

三、const：声明常量的利器

1. 必须初始化

   • const声明时必须赋值，否则报错：

     javascript
      代码解读
     复制代码
     const PI = 3.14;       // 正确
     const ERROR;           // 报错：必须初始化[^4]
     

2. 不可重新赋值（但可修改内部属性）

   • 对于简单类型（如数字、字符串），值不可变：

     javascript
      代码解读
     复制代码
     const URL = "http://example.com";
     URL = "http://new.com"; // 报错：Assignment to constant variable[^4]
     

   • 对于对象或数组，属性或元素可以修改：

     javascript
      代码解读
     复制代码
     const user = { name: "小明" };
     user.name = "小红";  // 合法（对象属性可变）[^4]
     

3. 块级作用域

   • const和let一样仅在块作用域内有效：

     javascript
      代码解读
     复制代码
     {
         const KEY = "secret";
     }
     console.log(KEY); // 报错：未定义[^4]
     

四、最佳实践

1. 避免使用var

   • let和const更安全、更清晰（ES6后推荐使用）¹

2. 优先使用const

   • 默认用const声明，确认需要重新赋值时改用let¹

3. 多变量声明技巧

   • 用逗号分隔多个变量，减少冗余代码：

     javascript
      代码解读
     复制代码
     // 一次声明多个变量（更高效）
     let name = "小明", age = 20, score = 95;[^1]
     

目录：总目录 上篇文章：第一讲：JavaScript 语法与数据类型详解

Footnotes

1. const适用场景，《JavaScript高级程序设计（第5版）》 第3章 ↩ ↩²