JavaScript陣列重新排序

給定的任務是用 JavaScript 重新排序一個數組。

我們可以使用以下方法重新排序陣列中的元素。實現上述任務的一種方法是使用sort()方法。

sort()是 JavaScript 中一個內建方法，它對字母元素進行排序。預設情況下，它按升序排序。

示例

下面的示例顯示陣列按升序重新排序：

<!DOCTYPE html>
<html>
<body>
   <p id="para1"></p>
   <p id="para2"></p>
   <script>
      const States = ["Telangana", "Uttar Pradesh", "Karnataka", "Kerala", "TamilNadu"];
      document.getElementById("para1").innerHTML = States;
      States.sort();
      document.getElementById("para2").innerHTML = States;
   </script>
</body>
</html>

我們可以看到，sort() 方法將陣列的元素按升序排序：

reverse() 方法

reverse()方法將反轉陣列元素。第一個元素將放在最後，最後一個元素將放在第一位。此方法將更改原始陣列。

const array = ['welcome', 'Tutorials', 'point'];
const rev = array.reverse();
console.log(rev);
// output: ["three", "two", "one"]
console.log(array);
// output: ["three", "two", "one"]

示例 1

在下面的示例中，我們透過反轉元素來改變陣列的順序：

<!DOCTYPE html>
<html>
<body>
   <p id="para1"></p>
   <p id="para2"></p>
   <script>
      const cities = ["vizag", "Hyderabad", "bangalore", "Guragaon"];
      document.getElementById("para1").innerHTML = cities;
      cities.reverse();
      document.getElementById("para2").innerHTML = cities;
   </script>
</body>
</html>

reverse()方法在下面的輸出中以相反的順序返回陣列元素：

示例 2

在下面的示例中，我們聲明瞭一個包含整數值的陣列。我們進行了交換以重新排序陣列元素。藉助temp變數，我們移動了陣列元素。

<!DOCTYPE html>
<html>
<body>
   <p id="para1"></p>
   <p id="para2"></p>
   <script>
      let array = [23, 53, 12, 87, 9];
      document.getElementById("para1").innerHTML = "The array: " + array;
      temp = array[1];
      array[1] = array[0];
      array[0] = temp;
      temp = array[3];
      array[3] = array[2];
      array[2] = temp;
      document.getElementById("para2").innerHTML = "After the array got swapped: " + array;
   </script>
</body>
</html>

使用 Compare() 函式

重新排序陣列元素的另一種方法是使用compare()函式。此函式可以作為sort()方法的引數。

但是，sort()方法有一個問題，它不會對整數元素陣列進行排序，因為它會將元素轉換為字串，然後使用 UTF-16 程式碼單元值比較它們的序列。

const array = [12,34,564,1232134];
array.sort();
console.log(array);
// output: [12, 1232134, 34, 564]

使用 sort() 函式

我們可以透過compare 函式來消除這個問題。此函式將根據我們比較的引數返回負值、零或正值。

這是 compare 函式的語法

function(a, b){return a - b}

sort()函式將比較兩個值並將值傳送到 compare 函式，然後它將根據輸出對值進行排序。

  • 如果輸出為負數，則 a 將在 b 之前排序。

  • 如果輸出為 0（零），則不會發生任何更改。

  • 如果輸出為正數，則 b 將在 a 之前排序。

例如，我們有兩個值 10、90（a、b），當函式計算 10 – 90 時。輸出為負數，因此 sort 函式將把 40 排在 100 之前。

示例

以下是用 compare 函式重新排序陣列元素的示例：

<!DOCTYPE html>
<html>
<body>
   <p>Reordering the array in ascending order:</p>
   <button onclick = "Asc()"> Click Asc </button>
   <button onclick = "Desc()"> Click Desc </button>
   <p id="demo1"></p>
   <p id="demo2"></p>
   <script>
      const points = [64, 23, 13, 75, 86];
      function Asc(){
         points.sort(function(a, b){return a - b}); // Ascending order
         document.getElementById("demo1").innerHTML = points;
      }
      function Desc(){
         points.sort(function(a, b){return b - a}); // Descending order
         document.getElementById("demo2").innerHTML = points;
      }
   </script>
</body>
</html>

以上程式碼的輸出將以升序和降序返回陣列元素，從而導致陣列元素重新排序。

更新於：2022年9月22日

9K+ 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告