解构赋值是JavaScript中从数组或对象提取数据的简洁方式。数组解构按位置取值，支持跳过、默认值和剩余元素；对象解构按属性名取值，支持重命名、嵌套、默认值；可用于函数参数，并需注意null/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 = 10, y = 20] = [5]; → x=5, y=20（y 使用默认值）
- 剩余元素收集：const [head, ...tail] = [1, 2, 3, 4]; → head=1, tail=[2, 3, 4]
提取对象属性：按名称取值
对象解构使用花括号语法，变量名需与属性名一致（或使用别名），支持嵌套解构和默认值。
- 基础用法：const { name, age } = { name: 'Alice', age: 30 }; → name='Alice', age=30
- 重命名属性：const { name: userName, age: userAge } = obj; → 变量名更灵活
- 嵌套解构：const { user: { profile: { city } } } = data; → 直接提取深层属性 city
- 默认值与可选链结合：const { count = 0 } = response || {}; → 避免访问 null/undefined 报错
函数参数中直接解构
在函数定义时即可解构传入的数组或对象，让接口更清晰，也便于设置默认参数。
- 对象参数解构：function greet({ name = 'Guest', level = 'user' }) { return `Hello ${name} (${level})`; }
- 数组参数解构：function sum([a, b, c = 0]) { return a + b + c; } → 调用 sum([1, 2]) 返回 3
- 混合使用：function process([first, ...rest], { timeout = 5000 }) { ... }
实用技巧与注意事项
解构不是万能的，需注意运行时行为和适用边界。
- 解构 null 或 undefined 会报错：const { x } = null; → TypeError，建议先做存在性检查或用空对象兜底
- 对象解构不关心属性顺序，只匹配键名；数组解构严格依赖顺序
- 可与展开运算符配合：创建新数组/对象时复用旧数据，如 const newArr = [...oldArr, newItem];
- 在 React 等框架中常用于 props 解构：const { id, title, children } = props;
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
