17370845950

解构赋值是JavaScript中从数组或对象提取数据的简洁语法。对象解构用{}按属性名匹配，支持重命名、默认值和嵌套；数组解构用[]按位置提取，支持跳过、剩余元素和默认值；常用于函数参数、API响应和变量交换。

解构赋值是 JavaScript 中一种简洁、直观地从数组或对象中提取数据的语法，它让你不用写一堆点号或下标就能拿到想要的值。

对象解构：按属性名提取

直接用花括号 {} 匹配对象的属性名，变量名和属性名一致时自动赋值：

const user = { name: '张三', age: 28, city: '杭州' };
const { name, age } = user;
console.log(name); // '张三'
console.log(age);  // 28

还能重命名、设置默认值、嵌套解构：

• 重命名：{ name: userName } → 把 user.name 赋给变量 userName
• 默认值：{ city = '北京' } → 如果 user.city 是 undefined，就用默认值
• 嵌套：{ address: { province } } → 提取 user.address.province

数组解构：按位置提取

用方括号 [] 按索引顺序获取元素，跳过某些项只需留空逗号：

const colors = ['red', 'green', 'blue'];
const [first, , third] = colors;
console.log(first);  // 'red'
console.log(third);  // 'blue'

支持剩余元素（...）、默认值、解构函数返回值：

• 剩余：[a, ...rest] → a 是第一个，rest 是后面所有项组成的数组
• 默认值：[x = 0, y = 0] → 若数组不够长，用默认值补上
• 函数返回数组？直接解构：const [err, data] = await fetchData()

实用场景：让代码更干净

常见于函数参数、API 响应处理、配置对象读取：

• 函数参数解构：function greet({ name, msg = '你好' }) { ... }
• 处理 fetch 结果：const { data, error } = await api.getUser(id)
• 交换变量不用临时变量：[a, b] = [b, a]

基本上就这些。用熟了会觉得写法清爽、意图清晰，不复杂但容易忽略细节——比如属性名必须完全匹配，或者默认值只在 undefined 时生效（null 不算）。