解构赋值

解构赋值是 ES6 的「按结构取值」语法：右边是什么结构，左边就用同样的结构接住。对象解构按键名取值，数组解构按下标取值，一行代码就能提取多个属性，还能同时设置默认值、重命名。

对象：const { name, age = 18, name: userName } = obj，冒号后面是重命名；
数组：const [first, , third] = arr，用空位跳过不需要的元素；
交换变量：[a, b] = [b, a]，不用再借助临时变量；
展开运算符 ...：复制与合并数组/对象（注意是浅拷贝，嵌套对象仍共享引用）；
函数参数解构：function f({ name, age })，传对象进来直接用字段，可读性极高。

解构在处理接口返回的数据时用得最多，比如 const { data, code } = await res.json() 一行拿到需要的字段。

本节要点对象解构按键名，数组解构按下标；冒号重命名、等号设默认值；...展开是浅拷贝；参数解构让函数接口更清晰。

JavaScript

const user = { name: '小明', age: 18, city: '北京' };

// 对象解构：按名取值 + 默认值
const { name, age, job = '学生' } = user;
console.log(name, age, job);

// 重命名：name 变量已占用时
const { name: userName } = user;
console.log(userName);

// 数组解构：按位置取，空位跳过
const colors = ['红', '绿', '蓝'];
const [first, , third] = colors;
console.log(first, third);

// 交换变量
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);            // 2 1

// 展开运算符：复制与合并（浅拷贝）
const copyUser = { ...user, age: 19 };
const newArr = [...colors, '黄'];
console.log(copyUser, newArr);

// 函数参数解构
function printInfo({ name, age }) {
  console.log(name + '，' + age + '岁');
}
printInfo(user);

🔗 相关词条await const 元素数组函数

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读