JavaScript解构赋值支持从数组或对象中按位置或属性名提取值并赋给变量，语法简洁、可读性高，支持跳过、剩余元素、默认值、别名、嵌套及函数参数解构，但需注意变量声明、undefined判断和引用关系。
JavaScript 的解构赋值能让你从数组或对象中快速提取值并赋给变量，写法简洁、可读性高。
数组解构：按位置取值
左边用方括号 []，变量顺序对应数组元素索引。未匹配的变量得 undefined，也可跳过或设置默认值。
-
基本用法：
const [a, b, c] = [1, 2, 3];→a=1, b=2, c=3 -
跳过元素：
const [first, , third] = ['a', 'b', 'c'];→first='a', third='c' -
剩余元素：
const [x, ...rest] = [10, 20, 30, 40];→x=10, rest=[20,30,40] -
默认值：
const [d = 5] = [];→d=5；const [e = 10] = [null];→e=null（注意：默认值只在undefined时生效）
对象解构：按属性名取值
左边用花括号 {}，变量名需与属性名一致（或使用别名），支持嵌套和默认值。
-
基础写法：
const { name, age } = { name: 'Alice', age: 25 };→ 直接得到变量name和age -
别名赋值：
const { name: userName, age: userAge } = { name: 'Bob', age: 30 };→userName='Bob', userAge=30 -
嵌套解构：
const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: 'Shanghai' } } }; -
默认值 + 可选属性：
const { level = 'guest', role } = { role: 'admin' };→level='guest', role='admin'
函数参数中的解构
可在函数形参位置直接解构，让调用更清晰，尤其适合配置对象。
立即学习“Java免费学习笔记（深入）”；
function greet({ name = 'Guest', greeting = 'Hello' }) { return `${greeting}, ${name}!`; }- 调用：
greet({ name: 'Tom' })→"Hello, Tom!"；greet({ greeting: 'Hi' })→"Hi, Guest!" - 数组参数也支持：
function sum([a, b]) { return a + b; }→sum([3, 5])返回8
注意事项和常见坑
解构本身不创建新引用，但要注意赋值目标必须是可写的，且语法结构要匹配。
- 不能对未声明变量直接解构（除非用括号包裹，如
([a, b] = [1, 2]);） - 对象解构时，若属性不存在，变量为
undefined，不会报错 - 解构赋值不等于深拷贝，对象/数组内部仍是引用关系
- 避免过度嵌套解构，影响可读性；复杂结构建议分步或用工具函数处理
