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

红宝书第二讲: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后推荐使用)^1^
  2. 优先使用const

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

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

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

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

Footnotes

  1. const适用场景,《JavaScript高级程序设计(第5版)》 第3章 ↩ ↩2
相关推荐
软件技术NINI25 分钟前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的28 分钟前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday34 分钟前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室42 分钟前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan1 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床1 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a3 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台3 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li4 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉
屏什么录4 小时前
电脑如何录屏幕视频和声音?从工具到代码,7 种方案帮你彻底搞定
前端·音视频开发