令我们编程更轻松：ES6 的 let 和 const

2023-12-12 18:51:58

变量声明

var

在 ES6 之前，JavaScript 中的变量声明使用 var 关键字。var 声明的变量具有函数作用域，这意味着它们在声明所在的函数内有效，并且可以在函数内任何地方访问。

function example() {
  var a = 1; // 声明变量 a
  console.log(a); // 输出 1
}

example(); // 调用 example 函数
console.log(a); // ReferenceError: a is not defined

在这个例子中，变量 a 在 example 函数内声明，因此它只在 example 函数内有效。在函数外访问变量 a 会导致 ReferenceError。

let 关键字

ES6 中引入的 let 关键字与 var 类似，但它具有块级作用域，这意味着它只在声明所在的代码块内有效。

function example() {
  let b = 2; // 声明变量 b
  {
    let b = 3; // 声明变量 b，并将其值设置为 3
    console.log(b); // 输出 3
  }
  console.log(b); // 输出 2
}

example(); // 调用 example 函数

在这个例子中，变量 b 在 example 函数内声明，但它只在 example 函数的代码块内有效。在代码块内，变量 b 被重新声明并赋值为 3，而外部的变量 b 保持不变。

const 关键字

const 关键字与 let 关键字类似，但它声明的变量是常量，这意味着它的值一旦被赋值后就不能再改变。

function example() {
  const c = 3; // 声明常量 c，并将其值设置为 3
  {
    // const c = 4; // 错误：常量 c 不能重新赋值
    console.log(c); // 输出 3
  }
  console.log(c); // 输出 3
}

example(); // 调用 example 函数

在这个例子中，变量 c 在 example 函数内声明为常量，因此它的值不能被改变。试图重新赋值会引发错误。

作用域提升

在 JavaScript 中，变量声明会发生作用域提升，这意味着变量的声明会被提升到代码块的顶部。

function example() {
  console.log(a); // 输出 undefined
  let a = 1; // 声明变量 a
}

example(); // 调用 example 函数

在这个例子中，变量 a 在 example 函数内声明，但它被提升到函数的顶部。因此，在声明变量 a 之前访问它仍然会输出 undefined。

ES5 和 ES6 中的块级作用域

ES5 中没有块级作用域的概念，因此变量只能具有函数作用域或全局作用域。ES6 引入了块级作用域，允许开发者在代码块内声明变量，这些变量只在声明所在的代码块内有效。

// ES5 中的块级作用域模拟
function example() {
  (function() {
    var a = 1; // 声明变量 a
    console.log(a); // 输出 1
  })();
  console.log(a); // ReferenceError: a is not defined
}

example(); // 调用 example 函数

// ES6 中的块级作用域
function example() {
  {
    let b = 2; // 声明变量 b
    console.log(b); // 输出 2
  }
  console.log(b); // ReferenceError: b is not defined
}

example(); // 调用 example 函数