变量解构赋值：ES6 入门指南

2023-09-23 19:11:00

ES6 引入了解构赋值功能，它提供了一种从数组和对象中优雅地提取值并赋值给变量的新方式。本文将深入浅出地介绍变量解构赋值的概念、语法和实际应用，帮助你掌握这门 ES6 的入门技能。

解构赋值的本质

解构赋值是破坏性赋值的一种形式，它允许我们同时从数组或对象中提取多个值并将其赋值给不同的变量。这比使用传统的多行赋值或循环要简洁、高效得多。

数组解构赋值

使用方括号 [] 来解构数组。例如：

const numbers = [1, 2, 3];
const [first, second] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2

在上面的示例中，我们从 numbers 数组中提取了前两个值并将其赋值给变量 first 和 second。

对象解构赋值

使用大括号 {} 来解构对象。例如：

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

console.log(name); // 输出: John
console.log(age); // 输出: 30

在上面的示例中，我们从 person 对象中提取了 name 和 age 属性并将其赋值给同名的变量。

嵌套解构

解构赋值可以嵌套使用，用于提取嵌套数据结构中的值。例如：

const data = {
  name: "John",
  address: {
    city: "New York",
    state: "NY",
  },
};

const { name, address: { city, state } } = data;

console.log(name); // 输出: John
console.log(city); // 输出: New York
console.log(state); // 输出: NY

在上面的示例中，我们从 data 对象中解构了 name 属性，并进一步解构了 address 对象中的 city 和 state 属性。

默认值和剩余值

解构赋值允许指定默认值，以便在解构的值不存在时使用。剩余值 (...) 运算符可用于收集解构后剩余的所有值。例如：

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]