如何在 JavaScript 中交換兩個變數?


我們將學習使用各種方法在 JavaScript 中交換兩個變數的值。讓我們透過示例瞭解交換的含義。例如,我們有兩個名為 variable1 和 variable2 的變數。當我們將 variable2 的值賦給 variable1,並將 variable1 的值賦給 variable2 時,可以說我們已經交換了 variable1 和 variable2 的值。

使用臨時變數

我們可以建立一個臨時變數,即任何變數來暫時儲存第一個變數的值。之後,我們可以將第二個變數的值賦給第一個變數。接下來,我們可以從臨時變數中獲取第一個變數的值並將其賦給第二個變數。

語法

使用者可以按照以下語法使用臨時變數來交換兩個變數的值。

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

在上面的語法中,我們將 variable1 的值儲存到 temporaryVariable 中。之後我們將 variable2 的值賦給 variable1,並將 temporaryVariable 的值賦給 variable2。

示例

在下面的示例中,我們建立了兩個變數並分配了字串值。此外,我們使用了臨時變數來交換兩個變數的值。在輸出中,使用者可以看到 variable1 和 variable2 的值已交換。

<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 變數 (num1 * num2) 除以 num2 變數並將結果儲存在 num2 變數中。接下來,我們將更新後的 num1 (num1*num2) 除以更新後的 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>

使用按位異或運算子

當我們對任何數值執行異或運算時,它會返回零。因此,我們將使用按位異或運算子的該屬性來交換兩個值。

語法

使用者可以按照以下語法使用按位異或運算子來交換兩個數字。

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

在上面的語法中,我們執行了 num1 和 num2 的按位異或運算三次來交換 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>

使用者可以使用第一種和第二種方法來交換所有變數,例如字串、布林值、數字等。第三種和第四種方法僅適用於排序數值。

更新於:2023年2月16日

2K+ 次瀏覽

啟動你的 職業生涯

完成課程獲得認證

開始學習
廣告