红宝书第二讲: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
相关推荐
yukin3 分钟前
一文搞懂JS类型转换!!!
前端
数字人直播4 分钟前
干货分享:AI 数字人直播怎么做才能适配多平台规则?
前端·后端
胡gh4 分钟前
中断渲染,利用fiber解决性能问题,性能优化又有的说了
前端·javascript·面试
日月晨曦5 分钟前
JavaScript原型:对象世界的"族谱"与"共享仓库"
前端
AliciaIr6 分钟前
前端面试:红绿灯问题与异步编程的底层实践
前端·javascript
日月晨曦7 分钟前
从XMLHttpRequest到Fetch:前后端通信的"进化史"
前端
已读不回1437 分钟前
移动端视口终极解决方案:使用 Visual Viewport封装一个优雅的 React Hook
前端·javascript·react.js
PineappleCoder8 分钟前
同源策略是啥?浏览器为啥拦我的跨域请求?(二)
前端·后端·node.js
洋流9 分钟前
0基础进大厂,第13天:Promise:你先等等我
前端·javascript·面试
龙在天9 分钟前
Promise到底能不能取消?怎么取消?你知道吗?
前端