JavaScript中使用解构赋值交换数组元素失效问题咨询

核心问题出在JavaScript解构赋值的执行顺序上：右边的表达式会先全部求值完成，而左边的赋值是按顺序依次执行的，后面的赋值会用到前面已经修改过的数组内容，这就导致当你用a[a[0]]作为左边的第二个赋值目标时，它的索引会因为第一个赋值操作而改变。

失败案例的执行步骤 #

初始数组：a = [1, 0]

1. 先计算右侧数组：[a[a[0]], a[0]]
   • 此时a[0]的值是1，所以a[a[0]]等价于a[1]，值为0；a[0]的值是1
   • 右侧最终得到[0, 1]
2. 按顺序给左侧目标赋值：
   • 第一步：把右侧第一个值0赋值给a[0]，数组变成[0, 0]
   • 第二步：要把右侧第二个值1赋值给a[a[0]]，但此时a[0]已经被改成0了，所以实际是给a[0]赋值，把a[0]又改回1，数组变回[1, 0]
   • 最终数组和初始状态一致，交换失败

成功案例的执行步骤 #

初始数组：a = [1, 0]

1. 右侧计算结果同样是[0, 1]
2. 左侧按顺序赋值：
   • 第一步：a[0] = 0，数组变成[0, 0]
   • 第二步：a[1] = 1，数组变成[0, 1]
   • 这里第二个赋值目标是固定的a[1]，不会被第一步的赋值影响，所以顺利完成交换

实现正确交换的方法 #

如果要通过解构赋值交换a[i]和a[a[i]]，可以先把初始的a[i]值存起来，避免索引被修改：

const a = [1, 0];
const temp = a[0]; // 保存初始的a[0]值
[a[0], a[temp]] = [a[temp], a[0]];
console.log(a); // 输出 [0, 1]

内容的提问来源于stack exchange，提问作者user22263253