从 ES6 之 let、const 开启你的前端魔法之旅

2023-11-04 04:05:37

一、let：代码块中的魔术师

let 闪亮登场，为 JavaScript 带来了声明变量的新方式。它所定义的变量只在代码块中有效，就像一个临时演员只在舞台上表演一样。这就意味着，一旦离开代码块，变量便会消失，宛如从未存在过。

举个例子，我们用 let 定义了一个变量叫 name，它的值是 "John Doe"。在代码块内，我们可以访问它，就像老友重逢。但是，一旦离开代码块，想要再次访问它就如同大海捞针，因为它是如此的短暂。

{
  let name = "John Doe";
  console.log(name); // 输出: "John Doe"
}

console.log(name); // 报错: ReferenceError: name is not defined

二、const：永恒不变的守护者

const 关键字闪耀登场，它就像一个永恒不变的守护者，所定义的变量就像钻石般坚硬，一旦声明，永不改变。因此，它非常适合存储那些你永远不想改变的数据，比如应用程序的版本号或服务器地址。

使用 const 定义变量时，我们必须立即为其赋值，因为它的本质就是永恒不变的。否则，JavaScript 就会报以一个怒视，表示你不能让它等待。

const version = "1.0.0";
console.log(version); // 输出: "1.0.0"

version = "1.1.0"; // 报错: TypeError: Assignment to constant variable.

三、变量提升：不存在的错觉

变量提升是 JavaScript 中的一个怪异现象，但对 let 和 const 来说，它不存在。这意味着这些关键字定义的变量不会被提升到函数或代码块的顶部。这就好比它们从不急于抢风头，而是静静地等待被使用。

console.log(name); // 报错: ReferenceError: name is not defined

let name = "John Doe";

在上面的代码中，我们尝试在声明变量之前使用它。如果没有 let，JavaScript 会自动将 name 提升到代码块的顶部，并赋予它一个 undefined 的值。但使用 let，它会毫不犹豫地报错，告诉你 name 根本不存在。

四、暂时性死区：变量的休眠期

暂时性死区是一个有点神秘的概念，但它对 let 和 const 来说至关重要。它指的是变量声明和初始化之间的那个短暂的瞬间，就像黎明前的黑暗。在这个阶段，变量是不可访问的，就像它们正在休眠。

function sayHello() {
  let name;
  console.log(name); // 报错: ReferenceError: name is not defined

  name = "John Doe";
  console.log(name); // 输出: "John Doe"
}

sayHello();

在这个函数中，我们定义了一个叫 name 的变量，但还没有赋值。当我们尝试在赋值之前使用它时，JavaScript 会报以一个怒视，因为 name 还没有准备好亮相。

五、变量作用域：控制变量的领地

变量作用域就是变量可以被访问的范围，它决定了变量的领地。let 和 const 关键字的作用域与 var 不同。let 和 const 定义的变量只在它们所在的代码块中有效，而 var 定义的变量则在整个函数中有效。

function sayHello() {
  var name = "John Doe";
  {
    let name = "Jane Doe";
    console.log(name); // 输出: "Jane Doe"
  }

  console.log(name); // 输出: "John Doe"
}

sayHello();