JavaScript：ES6：解构赋值

作者：马育民 • • 阅读：10036

介绍

解构赋值（Destructuring Assignment）是 ES6 核心语法，允许快速从数组、对象、函数参数、嵌套结构中提取值，简化变量声明、传参、交换变量等场景。

分为两大体系：数组解构、对象解构，额外扩展字符串、函数参数、嵌套、默认值、剩余运算符等用法。

对象解构（最常用）

匹配 key，与顺序无关

1. 基础语法

左侧 {} 写属性名，自动匹配对象同名 key，顺序不影响结果

const user = { name: "张三", age: 20 };
const { name, age } = user;
console.log(name, age); // 张三 20

2. 重命名：原Key : 新变量名

const user = { name: "李四", age: 18 };
// name → username，age保持原名
const { name: username, age } = user;
console.log(username, age); // 李四 18

3. 默认值 + 重命名组合

仅属性不存在/值为 undefined 生效

const user = { name: "王五" };
// 重命名 + 默认年龄
const { name: uname, age = 25 } = user;
console.log(uname, age); // 王五 25

4. 单独解构已有变量（必须加括号）

直接 {name} = obj 会被识别为代码块，语法报错

let uname;
const user = { name: "赵六" };
// 正确写法：外层()包裹
({ name: uname } = user);
console.log(uname); // 赵六

5. 剩余运算符 ...rest 收集剩余属性

const info = { a: 1, b: 2, c: 3 };
const { a, ...other } = info;
console.log(other); // {b:2, c:3}

数组解构

1. 基础语法

左侧用 [] 匹配右侧数组下标顺序赋值，顺序决定取值。

const arr = [10, 20, 30];
// 完整解构
const [a, b, c] = arr;
console.log(a, b, c); // 10 20 30

// 只取前两个
const [x, y] = arr;
console.log(x, y); // 10 20

2. 跳过元素（空位）

逗号占位跳过不需要的值

const arr = [1, 2, 3, 4];
const [first, , third] = arr;
console.log(first, third); // 1 3

3. 剩余运算符 ...rest（必须放最后）

收集剩余所有元素，生成新数组

const arr = [10, 20, 30, 40];
const [n1, n2, ...rest] = arr;
console.log(n1, n2); // 10 20
console.log(rest); // [30, 40]

4. 默认值

当对应位置值为 undefined 时，启用默认值；null/0/'' 不会触发

const arr = [10, undefined];
const [a = 0, b = 50] = arr;
console.log(a, b); // 10 50

// null不触发默认值
const [c = 100] = [null];
console.log(c); // null

5. 交换变量（经典用法，无需临时变量）

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

6. 函数返回数组快速拆解

function getPos() {
  return [100, 200];
}
const [x, y] = getPos();

嵌套解构（数组+对象混合层级）

1. 嵌套对象

const data = {
  user: {
    id: 1,
    info: { height: 180 }
  }
};
// 逐层匹配结构
const { user: { info: { height } } } = data;
console.log(height); // 180

// 嵌套+重命名+默认值
const { user: { info: { weight = 70 } } } = data;
console.log(weight); //70

2. 对象套数组

const res = { list: [10, 20, 30] };
const { list: [first, second] } = res;
console.log(first, second); // 10 20

3. 数组套对象

const arr = [{ title: "JS" }, { title: "Vue" }];
const [{ title: book1 }, { title: book2 }] = arr;
console.log(book1, book2); // JS Vue

函数参数解构（开发高频场景）

1. 对象参数解构（替代传统 options 取值）

// 传统写法
function showUser(opt) {
  const name = opt.name;
  const age = opt.age || 18;
}

// 解构简化，直接在参数层提取
function showUser({ name, age = 18 }) {
  console.log(name, age);
}
showUser({ name: "小明" }); // 小明 18

2. 参数解构 + 重命名

function print({ name: username }) {
  console.log(username);
}
print({ name: "小红" });

3. 兜底空对象（防止不传参报错）

如果调用时不传参数，{} 解构 undefined 会报错，设置默认空对象

// 安全写法：参数默认 = {}
function getUser({ name = "匿名" } = {}) {
  console.log(name);
}
getUser(); // 匿名（不传参不报错）

4. 数组参数解构

function sum([a, b]) {
  return a + b;
}
sum([10, 20]); // 30

字符串、Map、Set 解构

1. 字符串解构（字符串可迭代，按字符拆分）

const str = "abc";
const [s1, s2] = str;
console.log(s1, s2); // a b

2. Map 解构

const map = new Map([["name", "老王"], ["age", 30]]);
// 遍历解构
for (const [key, val] of map) {
  console.log(key, val);
}

解构常见边界与坑

  1. 默认值仅对 undefined 生效
    null、0、''、false 都会直接使用原值，不会取默认值

    const [a = 10] = [0];
console.log(a); // 0

  2. 剩余运算符 ...rest 只能放在最后

    // 报错：Rest element must be last element
const [ ...r, a ] = [1,2,3];

  3. 解构 null / undefined 直接报错
    数组/对象解构的右侧不能是 null/undefined

    const { name } = null; // Uncaught TypeError

  4. 对象解构无顺序，数组解构严格按下标顺序

  5. const / let / var 均可解构，常量解构后不能重新赋值
    const [a] = [10];
a = 20; // 报错，常量不可修改

实用开发场景汇总

  1. 接口返回数据快速提取字段

    const apiRes = { code: 200, data: { list: [], total: 100 } };
const { code, data: { list, total } } = apiRes;

  2. 函数配置参数简化

  3. 数组交换两个变量

  4. 批量导入模块

    import { ref, reactive } from "vue";

  5. 对象浅拷贝（剩余运算符）

    const obj = {a:1,b:2};
const copy = {...obj};

  6. 循环遍历数组对象快速取值

    const users = [{name:"A"}, {name:"B"}];
for(const {name} of users){}

原文出处：/show_1GW3iBxuu3Wo.html

吉ICP备15003043号