JS 交换两个变量的值：5 种实用方法（附详细注释）
在 JS 开发中，交换两个变量的值是基础高频操作，不同方法适配不同场景，新手也能轻松理解。以下整理5种核心实现方式，代码简洁带注释，兼顾原理和实用性，直接可复制使用。
方法1：临时变量法（最基础、最通用）
核心：借助第三方临时变量存储中间值，无兼容问题，适合所有场景，新手首选。
// 定义需要交换的两个变量
let a = 10, b = 20;
console.log('交换前：', a, b); // 交换前：10 20
// 1. 声明临时变量temp，存储a的初始值
let temp = a;
// 2. 将b的值赋值给a，此时a变成b的初始值
a = b;
// 3. 将temp（原a值）赋值给b，完成交换
b = temp;
console.log('交换后：', a, b); // 交换后：20 10
方法2：算术运算法（数字专属，无需临时变量）
核心：利用加减/乘除运算实现值的互换，仅适用于数字类型变量，不推荐乘除（易出现溢出/0值问题）。
let a = 10, b = 20;
console.log('交换前：', a, b); // 交换前：10 20
// 1. a = 原a + 原b，此时a存储了两数之和
a = a + b;
// 2. b = 总和 - 原b = 原a，完成b的赋值
b = a - b;
// 3. a = 总和 - 新b（原a）= 原b，完成a的赋值
a = a - b;
console.log('交换后：', a, b); // 交换后：20 10
方法3：解构赋值法（ES6+，最简洁优雅）
核心：ES6 新增的数组解构语法，一行代码完成交换，无需临时变量，现代开发主流用法（需环境支持ES6）。
let a = 10, b = 20;
console.log('交换前：', a, b); // 交换前：10 20
// 数组解构赋值，直接互换两个变量的值，一行搞定
[a, b] = [b, a];
console.log('交换后：', a, b); // 交换后：20 10
方法4：位运算异或法（数字专属，高性能）
核心：利用异或（ ^ ）运算特性： x^x=0 、 x^0=x 、 a^b^b=a ，仅适用于数字类型，底层运算性能高。
let a = 10, b = 20;
console.log('交换前：', a, b); // 交换前：10 20
// 1. a = 原a ^ 原b
a = a ^ b;
// 2. b = 原a ^ 原b ^ 原b = 原a
b = a ^ b;
// 3. a = 原a ^ 原b ^ 原a = 原b
a = a ^ b;
console.log('交换后：', a, b); // 交换后：20 10
方法5：对象/数组临时容器法（灵活拓展）
核心：借助对象或数组作为临时容器存储值，思路灵活，适合需要同时操作多个变量的场景。
let a = 10, b = 20;
console.log('交换前：', a, b); // 交换前：10 20
// 方式A：数组容器
let arr = [b, a];
a = arr[0];
b = arr[1];
// 方式B：对象容器（注释掉上面可运行）
// let obj = {x: b, y: a};
// a = obj.x;
// b = obj.y;
console.log('交换后：', a, b); // 交换后：20 10
核心总结（新手必看）
1. 日常开发首选：解构赋值法（ES6+），一行代码，简洁易读；
2. 兼容老环境：临时变量法，无任何兼容问题，逻辑最清晰；
3. 数字专属场景：算术运算法（简单）、异或法（高性能）；
4. 避坑点：算术运算法/异或法不能用于非数字变量（如字符串、布尔值），会报错/得到错误结果。
拓展：非数字变量交换（示例）
以上仅解构赋值法、临时变量法可直接交换字符串/布尔值，示例如下：
// 交换字符串变量
let str1 = 'hello', str2 = 'world';
[str1, str2] = [str2, str1];
console.log(str1, str2); // world hello
阅读原文：原文链接
该文章在 2026/2/22 23:54:09 编辑过
400 186 1886
