红宝书第二讲: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
相关推荐
全宝几秒前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
前端双越老师6 分钟前
学不动了?没事,前端娱乐圈也更新不动了
javascript·react.js·ai编程
江城开朗的豌豆7 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪22 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨29 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗30 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码32 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜34 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军39 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试