ES6 解构赋值

解构赋值是 ES6 里最能”提升幸福感”的语法之一，从数组或对象里取数据，过去要一行行写变量，现在一条语句就能同时取出多个。

Vue、React 代码里几乎天天出现，这篇讲透数组解构、对象解构、嵌套解构和默认值。

数组解构

基本用法

按位置依次取出：

// ES5：一个一个取
const arr = [10, 20];
const a = arr[0];
const b = arr[1];

// ES6：一行取出
const [a, b] = [10, 20];
console.log(a, b); // 10 20

跳过、取后几位、剩余

// 示例
const [x, , z] = [1, 2, 3];       // 空位跳过第 2 个
console.log(x, z);                // 1 3

const [, second] = [1, 2];        // 只取第 2 位
console.log(second);              // 2

// 结合 rest 参数（函数扩展篇讲过它的"收集"用法）
const [head, ...rest] = [1, 2, 3, 4];
console.log(head);    // 1
console.log(rest);    // [2, 3, 4]

交换两个变量的值

// 示例：不用临时变量，直接交换
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

默认值

下标对应位置不存在或为 undefined 时生效：

// 示例
const [x = 1, y = 2] = [];
console.log(x, y);   // 1 2

const [m = 5, n] = [undefined, 8];
console.log(m, n);   // 5 8

对象解构

按属性名取

对象解构不是按顺序，而是按属性名匹配：

// ES5
const user = { name: '小明', age: 20 };
const name = user.name;
const age = user.age;

// ES6：按属性名取
const { name, age } = user;

注意：名称必须和属性名一致。想换个变量名，用 属性名: 新名字：

// 示例
const { name: n, age: a } = { name: '小明', age: 20 };
console.log(n); // 小明
console.log(a); // 20

嵌套对象解构

层层解构，直接取深层数据：

// 示例
const data = {
  user: { name: '小明', info: { city: '北京' } },
};
const { user: { name, info: { city } } } = data;
console.log(name); // 小明
console.log(city); // 北京

默认值

属性不存在或值为 undefined 时生效：

// 示例
const { title = '默认标题', likes = 0 } = { title: '你好' };
console.log(title); // 你好
console.log(likes); // 0

函数参数解构

解构最常用于函数参数——传给函数时直接拆开：

// 例：参数是一个对象，函数体里直接用属性名
function greeting({ name, age }) {
  console.log(`${name} 今年 ${age} 岁`);
}
greeting({ name: '小明', age: 20 });  // 小明 今年 20 岁

给参数默认值 + 解构默认值，可以更稳健：

// 示例
function config({ host = 'localhost', port = 8080 } = {}) {
  console.log(host, port);
}
config();                        // localhost 8080
config({ host: 'a.com', port: 3000 }); // a.com 3000

解构的常见用途