JavaScript 如何互换两个变量

我们将学习如何使用各种方法在JavaScript中交换两个变量的值。让我们通过例子来理解交换的含义。例如，我们有两个变量，叫做variable1和variable2。当我们把变量2的值赋给变量1，把变量1的值赋给变量2时，我们可以说我们已经交换了变量1和变量2的值。

使用临时变量

我们可以创建一个临时变量，也就是任何变量来临时存储第一个变量的值。之后，我们可以将第二个变量的值分配给第一个变量。接下来，我们可以从临时变量中获取第一个变量的值，并将其分配给第二个变量。

语法

用户可以按照下面的语法来使用临时变量来交换两个变量的值。

let temporaryVariable = variable1;
variable1 = variable2;
variable2 = temporaryVariable;

在上面的语法中，我们已经将变量1的值存储到临时变量中。之后，我们将变量2的值分配给了变量1，将临时变量的值分配给了变量2。

例子

在下面的例子中，我们已经创建了两个变量并分配了字符串值。同时，我们使用临时变量来交换两个变量的值。在输出中，用户可以看到变量1和变量2的值被互换了。

<html>
<body>
   <h2>Using the <i> temporary variable </i> to swap two variable values in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let variable1 = "Value1";
      let variable2 = "Value2";
      let temporaryVariable = variable1;
      variable1 = variable2;
      variable2 = temporaryVariable;
      output.innerHTML += "The value of the variable1 and variable2 after swaping are the <br/>";
      output.innerHTML += "variable1 = " + variable1 + " variable2 = " + variable2;
   </script>
</body>
</html>

使用赋值析构属性

在JavaScript的ES6版本中，引入了数组或对象的重构。在数组的析构中，我们可以将数组的值存储到另一个或同一个变量中。在这里，我们将创建一个包含两个变量的数组，并解构该数组以交换两个变量。

语法

用户可以按照下面的语法来使用数组析构属性来交换两个变量。

[var2, var1] = [var1, var2];

在上面的语法中，我们将var1的值存储到var2，var2存储到var1。

例子

在下面的例子中，我们取了var1和var2。之后，我们用var1和var2创建了两个变量的数组。在对数组进行重组时，我们将var1的值分配给var2变量，将var2分配给var1变量。

<html>
<body>
   <h2>Using the <i>Assignment destructuring property</i> to swap two variable values in JavaScript </h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      let var1 = 20;
      let var2 = 10;
      function swapVariables() {
         [var2, var1] = [var1, var2];
         output.innerHTML += "The value of the var1 and var2 after swaping are the <br/>";
         output.innerHTML += "var1 = " + var1 + " var2 = " + var2;
      }
      swapVariables()
   </script>
</body>
</html>

使用算术运算符

我们可以使用乘法和除法算术运算符来交换两个数字。要交换两个变量，我们可以对这两个数字值进行算术运算。

语法

用户可以按照下面的语法，使用算术运算符来交换两个数字变量的值。

num1 = num1 * num2;  
num2 = num1 / num2; 
num1 = num1 / num2;

在上面的语法中，我们首先将两个数字相乘并存储在num1变量中。之后，我们将新的num1变量（num1num2）与num2变量相除，并将其存储在num2变量中。接下来，我们用更新的num1(num1num2)除以更新的num2，并将其储存在num1变量中。

例子

在下面的例子中，swapNumbers()函数交换了两个数字值。在下面这个例子的输出中，用户可以观察到num1和num2变量的初始值以及我们交换两个变量后的值。

<html>
<body>
   <h2>Using the <i>Arithmetic operators</i> to swap two variable values in JavaScript</h2>
   <div id = "output"> </div>
   <button onclick = "swapNumbers()"> Swap variables </button>
   <script>
      let output = document.getElementById('output');
      function swapNumbers() {
         let num1 = 2;
         let num2 = 4;
         output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";

         num1 = num1 * num2;  // num1 == 8 (2*4)
         num2 = num1 / num2; // num2 == 2 (8/4)
         num1 = num1 / num2; // num1 == 4, (8/2)

         output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
         output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
      }
   </script>
</body>
</html>

使用Bitwise XOR运算符

当我们对任何数值与自身进行XOR操作时，它都会返回0。因此，我们将使用顺时针XOR运算符的这一属性来交换两个值。

语法

用户可以按照下面的语法来使用顺时针XOR运算符来交换两个数字。

num1 = num1 ^ num2; // num1 == num1 ^ num2
num2 = num1 ^ num2; // num2 == (num1 ^ num2) ^ num2 == num1
num1 = num1 ^ num2; // num1 == (num1 ^ num2) ^ num1 == num2

在上面的语法中，我们对num1和num2进行了三次比特XOR操作，两次交换了num1和num2的变量值。

例子

在下面的例子中，当用户点击交换变量按钮时，将弹出一个提示框来接受数字输入。之后，在输出中，用户可以看到交换后的数字值。

<html>
<body>
   <h2>Using the <i>Bitwise XOR operator</i> to swap two variable values in JavaScript</h2>
   <div id="output"> </div>
   <button onclick = "swapNumbers()">Swap variables</button>
   <script>
      let output = document.getElementById('output');
      function swapNumbers() {
         let num1 = prompt("Enter first number value", 10);
         let num2 = prompt("Enter second number value", 20);
         output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";

         num1 = num1 ^ num2;
         num2 = num1 ^ num2;
         num1 = num1 ^ num2;

         output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
         output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
      }
   </script>
</body>
</html>