解构赋值是JavaScript中按位置(数组)或属性名(对象)提取值的语法,支持跳过、剩余、默认值、重命名和嵌套,常用于函数参数、变量交换和API数据提取,需注意左侧语法合法性及undefined处理。
解构赋值是 JavaScript 中一种简洁提取数组或对象中值的语法,它让你不用写一堆点号或下标就能拿到想要的数据。
数组解构用方括号 [],变量顺序对应元素索引位置。没匹配上的变量为 undefined,也可以跳过某些位置或设置默认值。
const [a, b, c] = [1, 2, 3]; → a=1, b=2, c=3const [first, , third] = ['a', 'b', 'c']; → first='a', third='c'const [x, ...rest] = [10, 20, 30, 40]; → x=10, rest=[20,30,40]const [name = '匿名'] = []; → name='匿名'对象解构用花括号 {},变量名默认需与属性名一致。可重命名、设默认值、嵌套解构,甚至从函数返回的对象里直接解构。
const { name, age } = { name: '小明', age: 25 };
const { name: nickname, age: years } = obj;
const { city = '北京' } = { name: '李四' }; → city='北京'const { user: { profile: { level } } } = data;
解构不是炫技,而是让代码更清晰、更少出错。
function greet({ name, msg = '你好' }) { return `${msg}, ${name}!`; }
[a, b] = [b, a];
const { data: { id, title }, status } = await fetchPost();
解构看起来简单,但几个细节容易踩坑。
const { x } = obj; 合法,但 { x } = obj; 会报错,需加括号或用 let/var)