极简三分钟ES6 - 解构赋值

定义解构赋值

想象你收到一个快递包裹（数组或对象），解构赋值就是拆开包装，直接拿出里面的东西赋值给变量。

js 复制代码

// 传统赋值 vs 解构赋值 
const arr = [10, 20];
// 传统：手动按索引取 
const a = arr[0], b = arr[1]; 
 
// 解构：一键拆包 
const [x, y] = [10, 20]; 
console.log(x);  // 10 
console.log(y);  // 20

核心用法详解

1、数组解构：按位置取货

基础模式：左右结构一致即可

js 复制代码

const [c, d] = ["苹果", "香蕉"];
console.log(c);  // "苹果"

跳过元素：用空位占位

js 复制代码

const [first, , third] = ["西瓜", "葡萄", "橙子"];
console.log(third);  // "橙子"（跳过了第二个）

剩余值打包 ：...收集剩余项

js 复制代码

const [num1, ...nums] = [1, 2, 3, 4];
console.log(nums);  // [2, 3, 4]

2、对象解构：按属性名取货

属性名匹配：变量名需与属性名一致

js 复制代码

const user = { name: "小明", age: 18 };
const { name, age } = user;
console.log(name);  // "小明"

重命名变量：解决命名冲突

js 复制代码

const { name: userName, age: userAge } = user;
console.log(userName);  // "小明"（原属性名在左侧）

嵌套对象：逐层拆解

js 复制代码

const student = { info: { id: "SP007" } };
const { info: { id } } = student;
console.log(id);  // "SP007"

3、 默认值：防止取到undefined 当拆包时遇到空值，自动启用备用值

js 复制代码

// 数组默认值 
const [price = 50] = []; // 数组为空 
console.log(price);  // 50 
 
// 对象默认值 
const { role = "访客" } = {};
console.log(role);  // "访客"

一些常见的使用场景

交换变量值 无需临时变量

js 复制代码

let m = 1, n = 2;
[m, n] = [n, m]; // 一秒互换 
console.log(m,  n); // 2, 1

函数参数按需提取 直接拆解传入对象

js 复制代码

function printUser({ name, age }) {
  console.log(`${name} 今年${age}岁`);
}
printUser({ name: "小红", age: 20 }); // 小红今年20岁

处理JSON数据 快速提取所需字段

js 复制代码

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

循环中拆解数据 简化遍历操作

js 复制代码

const users = [{name: "张三"}, {name: "李四"}];
for (const {name} of users) {
  console.log(name);  // 直接输出姓名 
}

牢记

解构赋值像"智能拆箱工具"，让数据提取更直观、代码更简洁！遇到多层级数据时尤其高效