解构赋值与展开运算符：现代 JS 提效技巧

1. 引言：为什么现代 JS 离不开解构与展开

ES6 引入的解构赋值（Destructuring Assignment）与展开运算符（Spread Operator），是日常写 JavaScript 时出现频率最高的语法糖之一。它们本身不改变程序的能力边界，却能显著减少样板代码，让「取值、传参、合并、复制」这些高频操作从五六行压缩到一行。

本文围绕五个核心点展开：数组解构、对象解构、默认值、剩余参数、展开复制，并给出可直接复制运行的示例与常见坑位提醒。

全文的知识脉络可以先用一张图串起来：

flowchart TD A["解构赋值与展开运算符"] --> B["解构：怎么优雅地取"] A --> C["展开：怎么优雅地合与复制"] B --> B1["数组解构：按位置取值"] B --> B2["对象解构：按属性名取值"] B --> B3["默认值：仅 undefined 生效"] B --> B4["剩余语法：收集剩下的部分"] C --> C1["浅复制与合并"] C --> C2["浅复制边界与 structuredClone"] B1 --> D["常见坑位清单"] B2 --> D B3 --> D B4 --> D C1 --> D C2 --> D

2. 数组解构

数组解构按位置取值，本质是调用迭代器，因此任何可迭代对象（数组、字符串、Set、Map、生成器）都能被解构。

const arr = [1, 2, 3, 4, 5];

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

// 跳过元素：用空位占位
const [, , third] = arr;
console.log(third); // 3

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

// 字符串同样可解构
const [c1, c2] = 'JS';
console.log(c1, c2); // J S

嵌套数组解构时，保持左右结构一致即可：

const matrix = [[1, 2], [3, 4]];
const [[x1, y1], [x2, y2]] = matrix;
console.log(x1, y1, x2, y2); // 1 2 3 4

3. 对象解构

对象解构按属性名取值，与顺序无关，这是它和数组解构最本质的区别。

const user = {
  id: 1,
  name: 'Alice',
  profile: { city: 'Shanghai', age: 28 }
};

// 基础解构
const { name, id } = user;
console.log(name, id); // Alice 1

// 重命名：原属性名: 新变量名
const { name: userName } = user;
console.log(userName); // Alice

// 嵌套解构
const { profile: { city } } = user;
console.log(city); // Shanghai

函数参数解构是对象解构最实用的场景之一，它让「配置对象」式的调用既清晰又不必在函数体内反复写 options.xxx：

function createButton({ text = '按钮', type = 'primary', disabled = false } = {}) {
  return `<button type="${type}" ${disabled ? 'disabled' : ''}>${text}</button>`;
}

console.log(createButton({ text: '提交' }));
// <button type="primary" >提交</button>

注意参数末尾的 = {}：它保证调用方不传参数时不会抛 Cannot destructure property ... of undefined。

4. 默认值

默认值只在解构结果为 undefined 时生效，null、0、''、false 都不会触发默认值------这是最容易踩的坑。

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

const [q = 10] = [null];
console.log(q); // null，不是 10

const { count = 0 } = { count: undefined };
console.log(count); // 0

const { flag = true } = { flag: false };
console.log(flag); // false

默认值可以是表达式，且惰性求值：只有真正需要时才执行。

function getDefault() {
  console.log('计算默认值');
  return 100;
}

const { value = getDefault() } = { value: 1 };
// 不会打印「计算默认值」，因为 value 已有值
console.log(value); // 1

默认值还可以引用前面已解构出的变量：

const { width, height = width } = { width: 300 };
console.log(width, height); // 300 300

5. 剩余参数与剩余属性

剩余（Rest）语法用 ... 收集「剩下的部分」，在函数参数中叫剩余参数，在解构中叫剩余属性。

// 函数剩余参数：必须是最后一个形参
function sum(first, ...rest) {
  return rest.reduce((acc, cur) => acc + cur, first);
}
console.log(sum(1, 2, 3, 4)); // 10

// 数组剩余元素
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail); // 1 [2, 3, 4]

// 对象剩余属性：常用于「剔除某些字段」
const { password, ...safeUser } = { id: 1, name: 'Alice', password: '123456' };
console.log(safeUser); // { id: 1, name: 'Alice' }

arguments 与剩余参数的区别值得记住：arguments 是类数组对象、不是真正的数组，且包含所有实参；剩余参数是真正的数组，只包含未被前面形参匹配的部分，并且箭头函数中同样可用。

6. 展开运算符与复制

展开运算符用 ... 把可迭代对象「摊开」，最常见的用途是浅复制与合并。

// 数组浅复制
const source = [1, 2, 3];
const copy = [...source];
console.log(copy); // [1, 2, 3]
console.log(copy === source); // false

// 数组合并
const merged = [...source, 4, 5];
console.log(merged); // [1, 2, 3, 4, 5]

// 对象浅复制与覆盖
const base = { a: 1, b: 2 };
const next = { ...base, b: 3, c: 4 };
console.log(next); // { a: 1, b: 3, c: 4 }

// 函数调用时展开
console.log(Math.max(...source)); // 3

6.1 浅复制的边界

展开复制只做一层复制，嵌套对象仍然是引用共享：

const original = { user: { name: 'Alice' } };
const shallow = { ...original };

shallow.user.name = 'Bob';
console.log(original.user.name); // Bob，原对象被改动了

需要深复制时，可用 structuredClone（现代浏览器与 Node 17+ 支持）：

const deep = structuredClone(original);
deep.user.name = 'Carol';
console.log(original.user.name); // Bob，原对象不受影响

6.2 展开与解构的取舍

• 需要「按位置取值」→ 数组解构；
• 需要「按名字取值」→ 对象解构；
• 需要「收集剩余」→ 剩余语法；
• 需要「生成新对象/新数组」→ 展开复制。

把上面的取舍整理成一张决策流程图，写代码时按图索骥即可：

flowchart TD S["拿到一份数据，要做什么？"] --> Q1{"按位置取值？"} Q1 -->|"是"| R1["数组解构 const [a, b] = arr"] Q1 -->|"否"| Q2{"按名字取值？"} Q2 -->|"是"| R2["对象解构 const { name } = obj"] Q2 -->|"否"| Q3{"要收集剩余部分？"} Q3 -->|"是"| R3["剩余语法 ...rest"] Q3 -->|"否"| Q4{"要生成新对象或新数组？"} Q4 -->|"是"| R4["展开复制 [...arr] / {...obj}"] R4 --> Q5{"存在嵌套引用？"} Q5 -->|"是"| R5["structuredClone 深复制"] Q5 -->|"否"| R6["浅复制即可"]

7. 常见坑位清单

场景	错误写法	正确写法	说明
解构 null/undefined	const { a } = null	const { a } = obj ?? {}	会抛 TypeError
默认值误判	const { n = 1 } = { n: null }	显式判断 n ?? 1	null 不触发默认值
剩余参数位置	function f(...rest, last)	function f(first, ...rest)	剩余参数必须在最后
对象展开覆盖	{ ...a, ...b } 顺序写反	后写的覆盖先写的	顺序决定优先级
深复制误用	{ ...obj } 改嵌套	structuredClone(obj)	展开只复制一层

8. 小结

解构赋值解决的是「怎么优雅地取」，展开运算符解决的是「怎么优雅地合与复制」。把默认值、剩余语法与它们组合起来，绝大多数数据搬运代码都能压缩到一行，同时保持可读性。真正需要警惕的只有两点：默认值对 null 不生效，以及展开复制永远是浅复制。