解构赋值 [a, b] = [b, a] 是 JavaScript 中最简洁、安全、语义清晰的变量交换方式,先求值右侧数组缓存原值,再按序解构赋值,支持所有原始类型及对象,无需临时变量且兼容 const 声明。

JavaScript中用解构赋值交换变量最简洁,逗号运算符本身不能直接交换变量,但可配合其他语法(如数组、立即执行函数)实现类似效果;不过真正推荐且安全的做法是解构赋值。
用解构赋值交换两个变量(最常用)
这是现代JS中最直观、最安全的交换方式,无需临时变量,语义清晰:
let a = 1, b = 2; [a, b] = [b, a]; // 交换完成:a → 2,b → 1
- 本质是先构建右侧新数组
[b, a],再按顺序解构赋值给左侧变量 - 支持任意可解构类型:数字、字符串、对象、数组甚至 null/undefined(但要注意解构失败风险)
- 不依赖变量类型或是否已声明——只要左侧是合法的解构目标即可
用逗号运算符“伪交换”(不推荐,仅作理解)
逗号运算符本身只返回最后一个表达式的值,不能单独完成交换。有人误写成:
let a = 1, b = 2; a = (b, b = a, a); // ❌ 错误逻辑,结果 a=1, b=1
这种写法看似“一行”,实则顺序混乱、可读性差,且容易出错。正确利用逗号需配合额外结构,例如:
let a = 1, b = 2; b = [a, a = b][0]; // ✅ 利用数组和逗号:先赋值 a=b,再取原a值给b
-
[a, a = b]创建数组时,先求a(得 1),再执行a = b(a 变为 2) - 整个表达式结果是数组
[1, 2],取索引 0 即原a的值,赋给b - 虽然技术上可行,但违背代码可读性和维护性原则,实际项目中应避免
扩展:解构也适用于多个变量或嵌套结构
交换不止限于两个变量,还能处理更复杂场景:
// 三变量轮换
let x = 1, y = 2, z = 3;
[x, y, z] = [y, z, x];
// 交换对象属性
const obj = { p: 10, q: 20 };
[obj.p, obj.q] = [obj.q, obj.p];
// 交换数组元素
const arr = [100, 200];
[arr[0], arr[1]] = [arr[1], arr[0]];
- 解构左侧必须与右侧结构匹配,否则会得到
undefined - 对 const 声明的变量,不能重新赋值,但对象/数组属性仍可通过解构修改内部值
- 注意:解构交换要求右侧表达式可求值,避免
[a, b] = [b, a]在未声明变量时抛 ReferenceError
为什么不推荐用传统临时变量或逗号技巧?
老式写法虽兼容性好,但冗余;逗号“黑魔法”易引发误解:
// 传统方式(安全但啰嗦) let temp = a; a = b; b = temp; // 位运算(仅限整数,且难懂) a = a ^ b; b = a ^ b; a = a ^ b;
- 临时变量明确、稳定,适合需要兼容极旧环境的场景
- 位运算有类型限制、副作用风险(如 NaN、Infinity 会失效),纯属炫技
- 解构赋值在所有现代浏览器和 Node.js 环境中都已稳定支持,是当前最佳实践
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











