解构赋值的应用场景？

解构赋值是ES6引入的一种语法糖，它允许我们按照一定模式从数组或对象中提取值，并赋值给变量。这种写法不仅让代码更简洁，还显著提升了可读性。掌握其核心应用场景，能让你在日常开发中写出更优雅的JavaScript代码。

从函数参数中提取对象属性

当函数接收一个配置对象作为参数时，使用解构可以直接在参数列表中提取所需属性，无需在函数体内再通过obj.key来访问。这明确了函数依赖哪些输入，是现在非常流行的做法。

function createUser({ name, age, email = 'default@example.com' }) {
  console.log(`创建用户: ${name}, 年龄: ${age}, 邮箱: ${email}`);
}
createUser({ name: 'Alice', age: 30 });

你还可以直接为解构的参数设置默认值，像上面email那样，这同时解决了参数默认值和对象属性缺失的问题。

交换两个变量的值

交换两个变量的值通常需要一个临时变量。解构赋值让这个过程变得异常简单，无需额外的中间存储。

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

这个技巧利用了数组解构的模式匹配，右侧创建了一个临时数组[b, a]，然后将其元素依次赋值给左侧的[a, b]。

处理函数返回的多个值

JavaScript函数只能返回一个值，但你可以返回一个数组或对象来包装多个值。解构赋值让接收这些返回值变得非常方便。

function getCoordinates() {
  return [10, 20, 30];
}
const [x, y, z] = getCoordinates();

function getStats() {
  return { max: 100, min: 0, avg: 50 };
}
const { max, avg } = getStats();

这比通过索引访问数组元素（如result[0]）或通过属性名访问对象（如result.max）要清晰直观得多。

提取嵌套数据与选择性赋值

解构可以深入到嵌套结构，直接从复杂的对象或数组中提取深层数据。

const user = {
  id: 1,
  info: {
    name: 'Alice',
    address: {
      city: 'Beijing'
    }
  }
};
const { info: { name, address: { city } } } = user;
console.log(name, city); // Alice Beijing

你还可以在解构时使用剩余模式...来收集剩余的元素或属性。

const [first, ...rest] = [1, 2, 3, 4];
const { name, ...otherProps } = user;

这对于从数组或对象中分离出特定项，同时保留其余部分非常有用。

在导入模块时，解构也极为常见，它能让你只导入需要的部分。

import { useState, useEffect } from 'react';

总体而言，解构赋值通过模式匹配简化了数据访问，使代码意图更明确。它已成为现代JavaScript风格中不可或缺的一部分，广泛应用于参数处理、状态管理、API数据消费等场景。