如何在 JavaScript 中交換兩個陣列元素?


在本教程中,我們使用不同的方法來交換 JavaScript 中的兩個陣列元素。例如,我們將陣列的第一個和第二個元素交換如下:

輸入 -

["first", "second", "third", "fourth", "fifth"]

輸出 -

["second", "first", "third", "fourth", "fifth"]

這裡我們交換了陣列的“第一個”和“第二個”值。

現在我們將看看交換兩個元素的不同方法 -

  • 使用額外的變數

  • 使用 Array Splice() 方法

  • 使用解構

方法 1:使用額外變數

在這種方法中,我們將藉助一個名為“temp”的額外變數,然後執行以下操作:

  • 我們將第一個元素複製到 temp。

  • 將第二個元素的值複製到第一個元素。

  • 將 temp 的值複製到第二個值。

示例

在下面的程式中,我們使用額外變數交換陣列的兩個元素。

<!DOCTYPE html>
<html>
<head>
   <title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
   <p id = "before">Before swap array elements are:<br> </p>
   <p id="after">After swapping array elements are: <br></p>
   <script>
      var arr=["first", "second", "third", "fourth", "fifth"]
      document.getElementById("before").innerHTML+= arr
      var temp=arr[0];
      arr[0]=arr[1];
      arr[1]=temp;
      document.getElementById("after").innerHTML+=arr
   </script>
</body>
</html>

方法 2:使用 Array Splice() 方法

使用splice(),我們可以實現陣列的交換。我們將簡單地取出指定位置的元素,然後splice將返回作為值的被移除的陣列,最後[0]是陣列 splice 方法的必要條件,它表示 splice 將在返回值中返回單個元素。

示例

以下程式演示瞭如何使用 Array splice 方法交換陣列中的兩個元素。

<html>
<head>
   <title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
   <h3>arr=["first", "second", "third", "fourth", "fifth"]</h3>
   <input type="button" value="Click to Swap" onclick="swap()"/>
   <h3 id="writeHere">After swapping array is:</h3>
   <script>
      function swap(){
         var arr=["first", "second", "third", "fourth", "fifth"]
         x=0, y=1
         var returnFromSplice=arr.splice(y, 1, arr[x])[0]
         arr[0]=returnFromSplice
         document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
      }
   </script>
</body>
</html>

方法 3:使用解構的一行程式碼

我們可以使用解構來交換陣列中的兩個元素。交換兩個元素的主要邏輯可以在一行中完成。

以下是使用一行程式碼交換兩個陣列元素的語法 -

arr[n]=[arr[m], arr[m]=arr[n]][0]

這裡 n、m 是要交換的元素的索引。

示例

在一行程式碼中交換兩個元素。

<html>
<body>
   <h3>arr=["first", "second", "third", "fourth", "fifth"]</h3>
   <input type="button" value="Click to Swap" onclick="swap()"/>
   <h3 id="writeHere">After swapping array is:</h3>
   <script>
      function swap(){
         let arr=["first", "second", "third", "fourth", "fifth"]
         arr[0]=[arr[1], arr[1]=arr[0]][0]
         document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
      }
   </script>
</body>
</html>

這裡我們將第 0 個元素賦值給第 1 個元素,並使用解構的概念將第 1 個數組元素賦值給第 0 個元素,最後[0]表示將返回一個數組形式的 1 個值,並且它將被交換。

因此,這些是一些我們可以交換兩個陣列元素的方法,在最後一種方法中,我們只需使用一行程式碼即可完成工作。

更新於: 2022-07-26

4K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.