ES6 中的 let 和 const：揭秘其幕后魔法

前端

2024-02-03 18:31:27

变量声明的新时代：ES6 的 let 和 const

在 ES6 之前，JavaScript 中只有 var 一种变量声明方式。然而，var 存在一些局限性，比如变量提升、作用域和重新声明等问题。为了解决这些问题，ES6 引入了 let 和 const 这两种新的变量声明方式。

let ：let 命令用于声明一个块级作用域的变量。这意味着，let 声明的变量只在它所在的块（花括号内）有效。一旦离开这个块，变量就会被销毁。

const ：const 命令用于声明一个只读的常量。这意味着，const 声明的变量的值一旦被初始化，就不能再被改变。const 常量在声明时必须立即初始化，并且一旦声明就不能再重新声明。

let 和 const 的工作原理

作用域

let 和 const 声明的变量的作用域是不同的。let 声明的变量只在它所在的块（花括号内）有效，而 const 声明的变量在整个函数或模块中都有效。

// let 的块级作用域
{
  let x = 10;
}
console.log(x); // ReferenceError: x is not defined

// const 的函数级作用域
const y = 20;
function test() {
  console.log(y); // 20
}
test();

暂时性死区

let 和 const 声明的变量都会经历一个暂时性死区（Temporal Dead Zone，TDZ）。在这个区域内，变量还没有被初始化，因此不能被访问。

// let 的暂时性死区
{
  console.log(x); // ReferenceError: x is not defined

  let x = 10;
}

// const 的暂时性死区
const y = 20;
console.log(y); // ReferenceError: y is not defined

变量提升

let 和 const 声明的变量不会像 var 那样被提升到函数或模块的顶部。这意味着，在使用 let 和 const 声明的变量之前，必须先声明它们。

// var 的变量提升
console.log(x); // undefined

var x = 10;

// let 和 const 的变量提升
console.log(x); // ReferenceError: x is not defined

let x = 10;

重新声明

let 声明的变量可以被重新声明，但必须在不同的块中。而 const 声明的变量不能被重新声明。

// let 的重新声明
{
  let x = 10;
}

{
  let x = 20;
}

console.log(x); // 20

// const 的重新声明
const y = 10;

const y = 20; // SyntaxError: Identifier 'y' has already been declared

赋值

let 声明的变量可以被重新赋值，而 const 声明的变量不能被重新赋值。

// let 的重新赋值
let x = 10;
x = 20;

console.log(x); // 20

// const 的重新赋值
const y = 10;
y = 20; // TypeError: Assignment to constant variable.

let 和 const 的应用场景

let

let 非常适合用于以下场景：

声明块级作用域的变量。
声明循环变量。
声明函数参数。
声明箭头函数中的变量。
声明解构赋值中的变量。

// 声明块级作用域的变量
{
  let x = 10;
}

// 声明循环变量
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 声明函数参数
function add(x, y) {
  let sum = x + y;
  return sum;
}

// 声明箭头函数中的变量
const multiply = (x, y) => {
  let product = x * y;
  return product;
};

// 声明解构赋值中的变量
const [a, b] = [10, 20];

const

const 非常适合用于以下场景：

声明只读的常量。
声明枚举值。
声明全局常量。
声明模块常量。

// 声明只读的常量
const PI = 3.14;

// 声明枚举值
const COLORS = {
  RED: '#FF0000',
  GREEN: '#00FF00',
  BLUE: '#0000FF'
};

// 声明全局常量
const BASE_URL = 'https://example.com';

// 声明模块常量
export const API_KEY = '1234567890';