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

红宝书第二讲:JavaScript变量声明:varletconst详解

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


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

  1. 函数作用域

    • var声明的变量属于整个函数 ,在块(如{}iffor)中可能"溢出"到外部:

      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声明的变量仅在当前块(如{}iffor)内有效

      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. 块级作用域

    • constlet一样仅在块作用域内有效:

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

四、最佳实践

  1. 避免使用var

    • letconst更安全、更清晰(ES6后推荐使用)^1^
  2. 优先使用const

    • 默认用const声明,确认需要重新赋值时改用let^1^
  3. 多变量声明技巧

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

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

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

Footnotes

  1. const适用场景,《JavaScript高级程序设计(第5版)》 第3章 2
相关推荐
阿虎儿10 分钟前
VS Code 的 launch.json 进行高效代码调试:配置和原理解析
前端·visual studio code
这里有鱼汤10 分钟前
一篇文章带你了解Python的反射机制,从小白到大神的进阶之路
前端·后端·python
这里有鱼汤13 分钟前
Python内存管理技巧,一篇文章告诉你内存优化的本质!
前端·后端·python
星星跌入梦境*25 分钟前
前端面试题(三):axios有哪些常用的方法
前端
前端双越老师31 分钟前
程序员如何体现工作热情和积极性?埋头苦干没有用
前端·面试
江沉晚呤时41 分钟前
C# 状态模式深度解析:构建灵活的状态驱动系统
开发语言·javascript·数据库·ui·ajax·c#·ecmascript
2401_897930061 小时前
CSS 从入门到精通
前端
还是鼠鼠1 小时前
Node.js局部生效的中间件
javascript·vscode·中间件·node.js·json·express
好_快1 小时前
Lodash源码阅读-baseProperty
前端·javascript·源码阅读
每一天,每一步1 小时前
echarts生成3D立体地图react组件
javascript·react.js·echarts