javascript解构赋值通过数组或对象字面量结构匹配右侧值，支持跳过、默认值、剩余运算符、重命名及嵌套；常用于函数参数、变量交换、api响应等，但右侧不可为null/undefined。
JavaScript 中利用解构赋值同时声明多个变量，核心是用数组或对象字面量的结构来匹配右侧的值，语法简洁且可读性强。
数组解构：按位置提取并声明变量
适用于有序数据（如函数返回多个值、数组元素），左侧用方括号定义变量名顺序，与右侧数组元素一一对应：
- let [a, b, c] = [1, 2, 3]; → 声明 a=1、b=2、c=3
- 可跳过某些位置：let [x, , z] = [10, 20, 30]; → x=10，z=30（y 被忽略）
- 支持默认值：let [p = 100, q = 200] = [5]; → p=5，q=200
- 可结合剩余运算符：let [first, ...rest] = [1, 2, 3, 4]; → first=1，rest=[2,3,4]
对象解构：按属性名提取并声明变量
适用于命名明确的数据（如配置对象、API 响应），左侧用花括号列出属性名，自动从右侧对象中取值：
- let { name, age } = { name: 'Alice', age: 30 }; → name='Alice'，age=30
- 变量名可重命名：let { title: bookName, year: publishYear } = { title: 'JS Guide', year: 2023 };
- 支持默认值：let { city = 'Beijing', country } = { country: 'China' }; → city='Beijing'，country='China'
- 嵌套解构也直接支持：let { user: { id, profile: { email } } } = { user: { id: 123, profile: { email: 'a@b.com' } } };
混合使用与常见场景
解构常用于函数参数、模块导入、Promise.all 返回值等实际开发中：
- 函数参数解构：function greet({ name, msg = 'Hello' }) { return `${msg}, ${name}!`; }
- 交换两个变量无需临时变量：[a, b] = [b, a];
- 处理 API 响应：const { data: { id, title }, status } = await fetchPost();
- 导入时重命名或提取：import { useState as useReactState, useEffect } from 'react';
注意事项
解构本质是“模式匹配”，右侧必须是可迭代对象（数组）或类对象（有属性的对象），否则会报错：
- null 或 undefined 不能解构（let [x] = null; → TypeError）
- 字符串可被数组解构（按字符）：let [a, b] = 'hi'; → a='h', b='i'
- 数值和布尔值会被包装成对象再解构，但通常无属性，结果为 undefined
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
