ES6 系列之 let 和 const：变量定义新革命

2024-02-22 03:02:09

在 JavaScript 的世界里，变量定义一直是程序员们津津乐道的话题，而 ES6 的到来更是在这个领域掀起了一场新的革命。let 和 const，这两个的出现，彻底改变了我们定义和使用变量的方式，带来了更清晰、更安全、更易维护的代码。

块级作用域

let 和 const 最引人注目的特点之一就是它们引入了块级作用域。与 var 的全局或函数作用域不同，let 和 const 定义的变量只在它们所在的代码块内有效。这意味着我们终于可以摆脱那些难以追踪的全局变量，让代码更加模块化和可维护。

// 全局变量，在整个程序中有效
var globalVar = 10;

// 函数作用域，在函数内部有效
function myFunction() {
  var functionVar = 20;
  console.log(functionVar); // 20
}

// 块级作用域，在代码块内有效
if (true) {
  let blockVar = 30;
  console.log(blockVar); // 30
}

// 试图在块级作用域外访问 blockVar 会报错
console.log(blockVar); // ReferenceError: blockVar is not defined

暂时性死区

let 和 const 还有一个重要特性，就是它们存在所谓的“暂时性死区”。在这个死区内，变量还没有被初始化，因此任何对它们的访问都会报错。这种机制可以有效地防止我们使用未定义的变量，从而提高代码的鲁棒性。

// let 声明的变量在初始化之前不能访问
let x;
console.log(x); // ReferenceError: x is not defined

// const 声明的变量必须在声明时初始化
const y = 10;
console.log(y); // 10

提升与重新声明

在 ES5 中，var 变量会存在提升（hoisting）现象，即变量声明会被提升到函数或块的顶部。这可能会导致一些意外的结果，例如变量在被初始化之前就已经被使用了。

let 和 const 则不存在提升现象。它们只能在声明所在的位置使用，否则就会报错。此外，let 和 const 也不允许重新声明，这可以防止我们不小心覆盖了已经定义的变量。

// ES5 中，var 变量会提升
console.log(a); // undefined
var a = 10;

// ES6 中，let 和 const 不会提升
console.log(b); // ReferenceError: b is not defined
let b = 20;

// ES6 中，let 和 const 不允许重新声明
let c = 30;
let c = 40; // SyntaxError: Identifier 'c' has already been declared

赋值与引用

在 ES5 中，变量保存的是值的副本。这意味着我们可以自由地修改变量的值，而不会影响到它所引用的对象或数组。

let 和 const 则有所不同。对于基本类型（如数字、字符串、布尔值等），let 和 const 保存的是值的副本，与 ES5 的行为一致。但是，对于引用类型（如对象和数组），let 和 const 保存的是对该对象的引用，而不是副本。这意味着对引用类型变量的修改会影响到它所引用的对象或数组。

// ES5 中，变量保存的是值的副本
var obj1 = { name: 'John Doe' };
var obj2 = obj1;

obj2.name = 'Jane Doe';

console.log(obj1.name); // Jane Doe

// ES6 中，let 和 const 保存的是对对象的引用
let obj3 = { name: 'John Doe' };
let obj4 = obj3;

obj4.name = 'Jane Doe';

console.log(obj3.name); // Jane Doe

对象和数组的解构赋值

ES6 中的解构赋值是一种非常方便的语法，可以让我们轻松地从对象和数组中提取数据。

对于对象，解构赋值可以将对象的属性提取出来，并分别赋值给不同的变量。

const person = { name: 'John Doe', age: 30 };

const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

对于数组，解构赋值可以将数组的元素提取出来，并分别赋值给不同的变量。

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]