对象解构：按名字取值

从对象里取字段，老写法是一行行赋值；解构赋值一行搞定，写法和定义对象反过来就行：

const user = { name: "小明", age: 18, city: "杭州" };

// 老写法
const n1 = user.name;
const a1 = user.age;

// 解构：花括号里的名字对应属性名
const { name, age } = user;
console.log(name, age); // 输出: 小明 18

字段名想换个本地变量名，用 属性名: 新名字；属性可能不存在时，给个默认值兜底：

const { name: userName, email = "未填写" } = user;
console.log(userName); // 输出: 小明
console.log(email);    // 输出: 未填写，user 里没有 email

重命名和默认值可以同时用：{ email: mail = "未填写" }。

数组解构：按位置取值

数组解构按位置对应，和对象按名字对应不同：

const rgb = ["红", "绿", "蓝"];

const [first, second] = rgb;
console.log(first, second); // 输出: 红 绿

// 跳着取：留空位
const [, , third] = rgb;
console.log(third); // 输出: 蓝

两个经典应用：交换变量和接收剩余元素。剩余元素用展开符 ... 收进一个新数组：

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 输出: 2 1

const [head, ...rest] = [10, 20, 30, 40];
console.log(head); // 输出: 10
console.log(rest); // 输出: [20, 30, 40]

函数参数解构：告别 params.xx

对象解构最实用的场景是函数参数。参数一多，与其记参数顺序，不如直接收一个对象再解开：

function createUser({ name, age = 18, role = "会员" }) {
    console.log(`${name} / ${age} / ${role}`);
}

createUser({ name: "小明", age: 20 });       // 输出: 小明 / 20 / 会员
createUser({ name: "小红", role: "管理员" }); // 输出: 小红 / 18 / 管理员

调用方只传关心的字段，漏掉的走默认值，参数顺序随便排——比 createUser("小明", 20, "会员") 可读多了。

嵌套解构与常见坑

对象套对象也能一层层解开：

const res = { data: { list: [1, 2, 3], total: 3 }, code: 0 };

const { data: { list, total } } = res;
console.log(total, list); // 输出: 3 [1, 2, 3]

两个新手坑提前说：

  • 解构 null 或 undefined 会直接报错，拿不准的先兜底：const { x } = obj ?? {}；
  • 用 let 解构的变量可以重新赋值，const 不行；交换变量那种写法因为动了已有变量，行首别忘加分号或加 let。

小结

  • 对象解构按属性名取值，{ a: 新名 = 默认值 } 支持重命名和兜底；
  • 数组解构按位置取值，空位可跳过，...rest 收集剩余元素，[a, b] = [b, a] 一行交换；
  • 函数参数解构让调用方"只传关心的字段"，是配置型函数的标准写法；
  • 解构 null/undefined 会抛错，来源不可靠时先用 ?? {} 兜底。

解构写顺之后，你会发现代码里 const xxx = yyy.zzz 这种取值行少了一大半，风格也统一了。