JavaScript 解构（Destructuring）简介

解构是 ES6 引入的一种语法，它允许从数组或对象中快速提取值，并将这些值赋给变量。解构使代码更加简洁、可读性更强，特别是在处理复杂的数据结构时。

解构赋值分类

1. 数组解构赋值
2. 对象解构赋值
3. 嵌套解构
4. 默认值
5. 剩余（Rest）解构

1. 数组解构赋值

基础用法

从数组中按顺序提取值，赋给变量：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

跳过元素

可以通过省略的位置跳过某些元素：

const arr = [1, 2, 3, 4];
const [a, , c] = arr; // 跳过第二个元素

console.log(a); // 1
console.log(c); // 3

结合剩余操作符

将数组的剩余部分赋值给变量：

const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;

console.log(a);    // 1
console.log(rest); // [2, 3, 4]

2. 对象解构赋值

基础用法

从对象中提取值，变量名需与对象的键名一致：

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

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

修改变量名

通过 : 指定变量名：

const obj = { name: "John", age: 30 };
const { name: userName, age: userAge } = obj;

console.log(userName); // "John"
console.log(userAge);  // 30

结合默认值

在解构时为变量设置默认值：

const obj = { name: "John" };
const { name, age = 25 } = obj;

console.log(name); // "John"
console.log(age);  // 25 （age 默认值）

提取嵌套对象

可以解构嵌套对象：

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

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

3. 嵌套解构

嵌套数组

数组中嵌套数组的解构：

const arr = [1, [2, 3]];
const [a, [b, c]] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

嵌套对象

对象中嵌套对象的解构：

const obj = { a: { b: { c: 10 } } };
const { a: { b: { c } } } = obj;

console.log(c); // 10

4. 默认值

数组默认值

解构时如果值为 undefined，会使用默认值：

const arr = [1];
const [a, b = 2] = arr;

console.log(a); // 1
console.log(b); // 2

对象默认值

同样适用于对象解构：

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

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

5. 剩余（Rest）解构

数组中的剩余

可以通过 ... 操作符收集数组中的剩余元素：

const arr = [1, 2, 3, 4];
const [a, ...rest] = arr;

console.log(a);    // 1
console.log(rest); // [2, 3, 4]

对象中的剩余

收集对象中未解构的属性：

const obj = { name: "John", age: 30, gender: "male" };
const { name, ...rest } = obj;

console.log(name); // "John"
console.log(rest); // { age: 30, gender: "male" }

6. 结合函数参数解构

数组解构参数

函数参数直接解构：

function sum([a, b]) {
  return a + b;
}

console.log(sum([1, 2])); // 3

对象解构参数

通过对象解构指定参数：

function greet({ name, age }) {
  return `Hello, ${name}. You are ${age} years old.`;
}

console.log(greet({ name: "John", age: 30 })); 
// "Hello, John. You are 30 years old."

7. 解构的常见应用场景

交换变量值

let a = 1, b = 2;
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

从函数返回值中提取

function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();
console.log(x, y); // 10, 20

从对象中提取部分值

const user = { id: 1, name: "John", age: 30 };
const { id, name } = user;

console.log(id);   // 1
console.log(name); // "John"

设置默认配置

const config = { width: 800 };
const { width, height = 600 } = config;

console.log(width);  // 800
console.log(height); // 600

总结

解构赋值是 JavaScript 中非常强大的语法工具，可以大幅简化代码，特别是在处理复杂数据结构、函数参数和默认值时。掌握数组和对象解构是写高效 JavaScript 的重要技能！