JavaScript解构赋值可从数组或对象中按索引或属性名批量提取值并赋给变量，支持跳过项、默认值、rest操作符、嵌套解构及函数参数解构，简化交换变量、处理返回值等操作。
JavaScript 中解构赋值能让你一行代码从数组或对象中提取值并赋给变量，省去手动取值和重复声明的步骤，写法简洁、可读性强。
从数组中批量提取并声明变量
按索引顺序从数组中取出元素，直接赋给对应变量名：
const [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
- 变量数量少于数组长度时，只取前几个；多于时，多余变量为 undefined
- 可用逗号“跳过”不需要的项：
const [first, , third] = ['a', 'b', 'c']; - 支持默认值：
const [x = 10, y = 20] = [5];→ x=5，y=20 - 配合 rest 操作符收集剩余项：
const [head, ...tail] = [1, 2, 3, 4];→ tail 是 [2, 3, 4]
从对象中按属性名提取并声明变量
根据属性键名自动匹配，无需重复写点号访问：
const user = { name: 'Alice', age: 28, city: 'Beijing' };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 28
- 变量名必须与属性名一致；若想用不同变量名，用 别名语法：
{ name: userName } - 支持嵌套解构：
const { profile: { level } } = { profile: { level: 5 } }; - 可设默认值应对缺失属性：
const { job = 'unknown' } = user; - 同样支持 rest 操作符：
const { name, ...rest } = user;→ rest 是 { age: 28, city: 'Beijing' }
函数参数中直接解构（常用且实用）
在函数形参位置直接解构，让调用更清晰、内部逻辑更干净：
立即学习“Java免费学习笔记（深入）”；
function greet({ name, age }) {
return `Hello ${name}, you are ${age} years old.`;
}
greet({ name: 'Bob', age: 30 }); // "Hello Bob, you are 30 years old."
- 适用于配置对象传参场景，避免函数体内一堆
const name = config.name - 可结合默认值处理可选参数：
function connect({ host = 'localhost', port = 3000 }) { ... } - 也支持数组参数解构：
function swap([a, b]) { return [b, a]; }
交换变量值、提取函数返回值等快捷用法
解构不只是初始化，还能简化常见操作：
-
交换两个变量：不用临时变量 —
[a, b] = [b, a]; -
接收多个返回值：函数返回数组时直接解构 —
const [min, max] = Math.minMax?.([1,5,3]) || [1,5];（需自行实现或用库） -
快速提取 Promise.all 结果：
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]); -
忽略部分返回值：
const [, , year] = new Date().toDateString().split(' '); // 取年份
