JavaScript 解构赋值详解：从基础到变量交换

数组与迭代对象的解构

解构赋值最基础的应用是针对数组。通过将左侧的变量列表与右侧的数组元素对应，可以一次性完成多个变量的初始化。除了标准数组，任何实现了可迭代协议（Iterable）的对象均支持此语法，包括字符串。

第1步：基本数组解构

目的：将数组中的元素按顺序分配给左侧对应的变量。

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出: 1 2 3

第2步：字符串解构示例

目的：演示字符串作为可迭代对象时的字符提取逻辑。

let [first, second] = "he";
console.log(first, second); // 输出: h e

对象解构与属性映射

对象解构要求左侧花括号内的标识符名称必须与对象属性名一致，否则对应变量将获取 undefined 值。当源对象属性名与目标变量名不一致时，可通过冒号语法进行映射绑定。

第3步：同名属性直接解构

目的：提取属性名与变量名完全匹配的值。

let { a, b, c } = { a: 1, b: 2, c: 3 };
console.log(a, b, c); // 输出: 1 2 3

第4步：处理缺失属性

目的：理解当右侧对象缺少对应键时的行为表现。

let { a, b, d } = { a: 1, b: 2, c: 3 };
// 属性 'd' 在源对象中不存在
console.log(a, b, d); // 输出: 1 2 undefined

第5步：属性名重命名（别名）

目的：在提取值的同时将其赋值给不同的本地变量名，格式为 key: variableName。

let { a, b, c: d } = { a: 1, b: 2, c: 3 };
// 将属性 'c' 的值赋给变量 'd'
console.log(a, b, d); // 输出: 1 2 3

不完全解构与剩余模式

在实际开发中，数据结构往往比需求更复杂。解构赋值允许左侧变量数量与右侧元素数量不匹配，并通过展开运算符（...）处理剩余数据。

第6步：左侧多于右侧（不足填充）

目的：了解当源数据少于目标变量时的默认处理机制。

let [a, b, c] = [1, 2];
console.log(a, b, c); // 输出: 1 2 undefined
// 注意：若使用默认值 let [x, y, z=10] = [1, 2]，则 z 为 10

第7步：右侧多于左侧（忽略多余）

目的：确认未显式声明的尾部元素将被自动丢弃。

let [a, b, c] = [1, 2, 3, 4];
console.log(a, b, c); // 输出: 1 2 3 （4 被忽略）

第8步：跳过特定位置元素

目的：通过逗号占位符忽略数组中间或特定位置的项，仅提取需要的值。

let [a, , c] = [1, 2, 3];
console.log(a, c); // 输出: 1 3
// 第二个元素 2 被跳过

第9步：剩余模式收集（Rest Pattern）

目的：将末尾所有未被捕获的元素收集为一个新数组。

let [a, b, ...rest] = [1, 2, 3, 4];
console.log(a, b, rest); // 输出: 1 2 [3, 4]

应用技巧：变量值交换

在不使用第三个临时变量的情况下交换两个变量的值，是解构赋值最具代表性的应用场景之一。

第10步：无临时变量交换

目的：利用元组打包与解构的特性实现原子级交换。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 输出: 2 1