1.ES6变量声明_es6模块种变量必须先声明再使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38644630/article/details/110578271

本文介绍ES6中变量声明的方式，包括var、let和const的区别，以及块作用域的概念，并通过具体代码示例展示了不同变量声明方式的行为特征。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ES变量声明

1.变量声明

var、let、const

（1）var

支持变量声明预解析
不支持块作用域
允许重复说明

（2）let

不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明（暂存死区）

（3）const

不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明（暂存死区）
常量（值一旦确定，不允许修改，所以必须初始化）

2.块作用域

由{}包含的代码块所产生的作用域

/*
作用域：变量的作用范围
全局-非函数
函数-函数包含
块作用域 - 对{}包含的范围
*/
{
var a = 1； // var 不支持 {}
let b = 2;
const c = 3;
}
console.log(a)  // 1
console.log(b)  // undefined
console.log(c)  // undefined

代码实例

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button.active {
        background: yellow;
      }
      p {
        display: none;
      }
      p.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <button class="active">选项一</button>
    <button>选项二</button>
    <button>选项三</button>
    <p class="active">内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <script>
      var buttons = document.querySelectorAll('button')
      var ps = document.querySelectorAll('p')
      // for (var i = 0; i < buttons.length; i++) {
      //   buttons[i].index = i
      //   buttons[i].onclick = function () {
      //     console.log(this.index)
      //     for (var i = 0; i < buttons.length; i++) {
      //       buttons[i].className = ''
      //       ps[i].className = ''
      //     }
      //     this.className = 'active'
      //     ps[this.index].className = 'active'
      //   }
      // }
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
          for (let i = 0; i < buttons.length; i++) {
            buttons[i].className = ''
            ps[i].className = ''
          }
          this.className = 'active'
          ps[i].className = 'active'
        }
      }
    </script>
  </body>