解构赋值

解构赋值是ES6引入的一种新的赋值语法，它允许我们从数组或对象中提取值，并将其赋给变量。解构赋值不仅语法简洁，而且使得代码更加易读和维护。

数组解构

基本用法

数组解构允许我们从数组中提取值，并将其赋给变量：

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

// 跳过某些元素
const [d, , e] = [4, 5, 6];
console.log(d); // 输出: 4
console.log(e); // 输出: 6

// 剩余参数
const [f, g, ...rest] = [7, 8, 9, 10, 11];
console.log(f); // 输出: 7
console.log(g); // 输出: 8
console.log(rest); // 输出: [9, 10, 11]

// 默认值
const [h, i, j = 12] = [13, 14];
console.log(h); // 输出: 13
console.log(i); // 输出: 14
console.log(j); // 输出: 12

应用场景

交换变量的值

使用数组解构可以方便地交换两个变量的值，而不需要使用临时变量：

let x = 1;
let y = 2;

// 传统方法
let temp = x;
x = y;
y = temp;

// 数组解构
[x, y] = [y, x];

console.log(x); // 输出: 2
console.log(y); // 输出: 1

函数返回多个值

使用数组解构可以方便地处理函数返回的多个值：

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

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

function getUser() {
  return ['John', 'Doe', 30];
}

const [firstName, lastName, age] = getUser();
console.log(firstName); // 输出: John
console.log(lastName); // 输出: Doe
console.log(age); // 输出: 30

遍历数组

使用数组解构可以方便地遍历数组中的元素：

const users = [
  ['John', 'Doe'],
  ['Jane', 'Smith'],
  ['Bob', 'Johnson']
];

for (const [firstName, lastName] of users) {
  console.log(`${firstName} ${lastName}`);
}
// 输出:
// John Doe
// Jane Smith
// Bob Johnson

对象解构

基本用法

对象解构允许我们从对象中提取值，并将其赋给变量：

// 基本用法
const { name, age } = { name: 'John', age: 30 };
console.log(name); // 输出: John
console.log(age); // 输出: 30

// 重命名变量
const { name: firstName, age: userAge } = { name: 'John', age: 30 };
console.log(firstName); // 输出: John
console.log(userAge); // 输出: 30

// 剩余参数
const { name: n, ...rest } = { name: 'John', age: 30, city: 'New York' };
console.log(n); // 输出: John
console.log(rest); // 输出: { age: 30, city: 'New York' }

// 默认值
const { name: nm, age: a = 25 } = { name: 'John' };
console.log(nm); // 输出: John
console.log(a); // 输出: 25

应用场景

提取对象的属性

使用对象解构可以方便地提取对象的属性：

const user = {
  id: 1,
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    country: 'USA'
  }
};

// 提取顶层属性
const { id, name, age } = user;
console.log(id, name, age); // 输出: 1 John 30

// 提取嵌套属性
const { address: { street, city, country } } = user;
console.log(street, city, country); // 输出: 123 Main St New York USA

// 提取部分属性
const { name: userName, address: { city: userCity } } = user;
console.log(userName, userCity); // 输出: John New York

函数参数解构

使用对象解构可以方便地处理函数的参数：

// 传统方法
function getUserInfo(user) {
  const name = user.name;
  const age = user.age;
  const city = user.city;
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

// 对象解构
function getUserInfo({ name, age, city }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

getUserInfo(user); // 输出: John is 30 years old and lives in New York.

// 默认值
function getUserInfo({ name, age = 25, city = 'Unknown' }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const user2 = {
  name: 'Jane'
};

getUserInfo(user2); // 输出: Jane is 25 years old and lives in Unknown.

导入模块

使用对象解构可以方便地导入模块中的特定成员：

// 传统方法
const fs = require('fs');
const readFile = fs.readFile;
const writeFile = fs.writeFile;

// 对象解构
const { readFile, writeFile } = require('fs');

// ES6 模块
import { useState, useEffect } from 'react';
import { createStore, applyMiddleware } from 'redux';

嵌套解构

我们可以同时使用数组解构和对象解构来处理复杂的数据结构：

const data = {
  users: [
    {
      id: 1,
      name: 'John',
      age: 30
    },
    {
      id: 2,
      name: 'Jane',
      age: 25
    }
  ],
  total: 2
};

const { users: [{ name: firstName }, { name: secondName }], total } = data;
console.log(firstName); // 输出: John
console.log(secondName); // 输出: Jane
console.log(total); // 输出: 2

解构赋值的注意事项

1. 解构赋值的右侧必须是可迭代的

对于数组解构，右侧的值必须是可迭代的（如数组、字符串、Set等）：

// 正确
const [a, b] = [1, 2];
const [c, d] = 'ab';

// 错误
const [e, f] = 123; // 错误: 123 is not iterable

2. 解构赋值的左侧必须是模式

对于对象解构，左侧必须是对象模式：

// 正确
const { name } = { name: 'John' };

// 错误
const name = { name: 'John' }; // 这不是解构赋值，而是简单的赋值

3. 解构赋值的默认值

只有当解构的变量值为undefined时，默认值才会生效：

const [a = 10] = [undefined];
console.log(a); // 输出: 10

const [b = 20] = [null];
console.log(b); // 输出: null

const { c = 30 } = { c: undefined };
console.log(c); // 输出: 30

const { d = 40 } = { d: null };
console.log(d); // 输出: null

面试常见问题

1. 什么是解构赋值？

解构赋值是ES6引入的一种新的赋值语法，它允许我们从数组或对象中提取值，并将其赋给变量。解构赋值不仅语法简洁，而且使得代码更加易读和维护。

2. 数组解构和对象解构的区别是什么？

• 数组解构：使用方括号[]，根据位置提取值
• 对象解构：使用花括号{}，根据属性名提取值

3. 如何使用解构赋值交换两个变量的值？

使用数组解构可以方便地交换两个变量的值：

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); // 输出: 2 1

4. 如何使用解构赋值处理函数返回的多个值？

使用数组解构可以方便地处理函数返回的多个值：

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

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

5. 如何使用解构赋值设置默认值？

可以在解构赋值中使用默认值，当解构的变量值为undefined时，默认值会生效：

// 数组解构默认值
const [a, b = 20] = [10];
console.log(a, b); // 输出: 10 20

// 对象解构默认值
const { c, d = 40 } = { c: 30 };
console.log(c, d); // 输出: 30 40

总结

解构赋值是ES6引入的一种新的赋值语法，它允许我们从数组或对象中提取值，并将其赋给变量。解构赋值不仅语法简洁，而且使得代码更加易读和维护。它在交换变量的值、处理函数返回的多个值、提取对象的属性、处理函数参数等场景下非常实用。