解构赋值：优雅取值的正确姿势

你还在这样写代码吗？

const user = { name: '小明', age: 25, job: '程序员' };

const name = user.name;
const age = user.age;
const job = user.job;

这代码虽然没毛病，但写多了真的很累。想象一下如果对象有 10 个属性，你的屏幕大概会被 const xxx = user.xxx 占满。

ES6 引入了解构赋值（Destructuring Assignment），就是为了把我们从这种重复劳动中解放出来。今天，小明就带你看看，如何优雅地从对象和数组里“掏”数据。

一、对象解构：按名索骥

对象解构是最常用的。它的核心逻辑是：变量名必须和属性名对应。

const { name, age, job } = user;
console.log(name, age, job); // '小明', 25, '程序员'

一行搞定！

1.1 想换个名字？（起别名）

如果你的变量名已经占用了，或者你想起个更短的名字：

const { name: myName } = user;
console.log(myName); // '小明'

1.2 默认值

如果属性不存在，解构会得到 undefined。你可以给它设个默认值：

const { gender = '男' } = user;

二、数组解构：按序排队

数组解构的逻辑和对象不同：它不看名字，看位置。

const colors = ['红', '绿', '蓝'];
const [first, second] = colors;
console.log(first, second); // '红', '绿'

2.1 跳过某些元素

如果你只想要第三个：

const [, , third] = colors;

2.2 交换变量（最优雅的写法）

以前交换两个变量需要中间变量 temp，现在：

let a = 1, b = 2;
[a, b] = [b, a]; // a=2, b=1

三、进阶玩法

3.1 嵌套解构

处理复杂的 API 返回结果时，简直是神器：

const response = {
  data: {
    list: [{ id: 1, text: 'Hello' }]
  }
};

const { data: { list: [{ text }] } } = response;
console.log(text); // 'Hello'

3.2 函数参数解构

这是小明最推荐的用法。它能让你的函数参数变得清晰明了：

// ❌ 不推荐：参数顺序不能错，且看不出属性
function printUser(user) { ... }

// ✅ 推荐：一眼看出需要哪些属性
function printUser({ name, age }) {
  console.log(`${name} 今年 ${age} 岁`);
}

四、注意事项：别解构“空”

解构虽然爽，但有一个大坑：不能对 null 或 undefined 进行解构。

const { name } = null; // ❌ TypeError!

小明的防御方案： 在解构复杂嵌套对象时，先给外层设一个空对象作为默认值：

const { data = {} } = response || {};

总结

对象解构看键名，数组解构看位置。
起别名和默认值能处理 80% 的复杂情况。
函数参数解构是提升代码可读性的最佳实践。
防御性编程：确保解构的对象不是 null。

小明建议： 解构虽好，也不要嵌套得太深。如果一行解构写了 100 多个字符，那就不叫优雅，那叫“代码加密”。

“解构赋值的本质是什么？” “是把复杂的世界拆解成你需要的样子。” —— 小明

最后，送你一个冷笑话：对象对数组说：“我最讨厌你了，解构你还得数数（索引）。” 数组对对象说：“我才讨厌你呢，解构你还得背单词（属性名）。” JS 引擎：“别吵了，反正你们最后都要被我拆散。”

解构赋值：优雅取值的正确姿势

相关标签