红宝书第二讲: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
相关推荐
不是吧这都有重名15 分钟前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端
霸王蟹16 分钟前
React中巧妙使用异步组件Suspense优化页面性能。
前端·笔记·学习·react.js·前端框架
Maỿbe25 分钟前
利用html制作简历网页和求职信息网页
前端·html
森叶1 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹1 小时前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹1 小时前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts
繁依Fanyi1 小时前
ColorAid —— 一个面向设计师的色盲模拟工具开发记
开发语言·前端·vue.js·编辑器·codebuddy首席试玩官
codelxy1 小时前
vue引用cesium,解决“Not allowed to load local resource”报错
javascript·vue.js
程序猿阿伟2 小时前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水2 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter