JavaScript 中的數字排序：sort 傳入 (a, b) => a – b 的用法介紹

更新日期： 2024 年 11 月 5 日

JavaScript 中的 sort 方法，是一個強大且常用的陣列排序工具。

但對於數字排序，很多人可能會覺得它的運作機制有點神秘。

特別是當我們使用 (a, b) => a - b 的方式來排序時，不需要額外進行大小判定或明確返回 1、0、-1，就能輕鬆進行數字排序。

本文將介紹 sort 方法的基本概念，以及為何在數字排序中，直接使用簡單的減法運算，便可達到排序效果。

什麼是 sort 方法？

sort 方法是 JavaScript 陣列的一個內建函數，允許我們對陣列中的元素進行排序。

該方法會直接修改原始陣列，並返回排序後的陣列。基本語法如下：

array.sort([compareFunction])

• compareFunction 是一個可選參數，它決定了排序的順序。
• 若不提供該參數，sort 會依據字典序（alphabetical order）將「數字」轉成「字串」再進行排序，這在數字排序時通常會導致意想不到的結果。

基本使用示例

以下是一些常規的 sort 方法用法：

let fruits = ['banana', 'apple', 'grape'];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape"]

let numbers = [10, 5, 20, 8];
numbers.sort();
console.log(numbers); // [10, 20, 5, 8]

當沒有提供 compareFunction 時，sort 方法會將數字當作字串來排序，因此 10 會被放在 2 前面，這不是我們期待的數字排序結果。

為了讓數字排序符合預期，我們需要提供一個 compareFunction。

常規的 compareFunction 寫法

在一般的 compareFunction 中，我們可以手動判斷兩個元素的大小，並返回對應的值來控制排序順序，例如：

function compareFn(a, b) {
  if (a > b) {
    return 1; // 意即 a 放在 b 後面
  }

  if (a < b) {
    return -1; // 意即 a 放在 b 前面
  }

  // a 等同於 b
  return 0; // 意即 a 與 b 之間的位置不變
}

在這裡，當 a 大於 b 時，compareFn 會返回正數 1，告知 sort 將 a 放在 b 的後面。

當 a 小於 b 時，compareFn 會返回負數 -1，表示 a 應該位於 b 前面。

若 a 等於 b，則返回 0，兩者的相對位置保持不變。

使用 (a, b) => a - b 進行數字排序

在數字排序中，我們可以進一步簡化 compareFunction，僅需 (a, b) => a - b 這樣的簡單表達式。

這樣一來，我們不需要進行多餘的大小判斷便能直接獲得正確的排序結果。例如：

let numbers = [10, 5, 20, 8];
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 8, 10, 20]

為什麼 (a, b) => a - b 可以進行數字排序？

在 JavaScript 中，sort 方法依賴 compareFunction 的返回值來決定元素的位置。

根據 MDN 文檔的說明，compareFunction 的返回值有以下意義：

• 若返回值小於 0，表示 a 應位於 b 之前。
• 若返回值大於 0，表示 a 應位於 b 之後。
• 若返回值為 0，則 a 和 b 的相對位置不變。

因此，當我們使用 (a, b) => a - b 時：

• 若 a 小於 b，a - b 的結果會是負值（例如 5 - 8 = -3），此時 sort 會將 a 放在 b 前面。
• 若 a 大於 b，a - b 的結果會是正值（例如 10 - 5 = 5），此時 sort 會將 a 放在 b 後面。
• 若 a 等於 b，a - b 的結果會是 0，sort 將保持兩者的相對位置不變。

由於我們只需讓 compareFunction 返回正值、負值或零，直接使用 a - b 可以輕鬆達到排序的目的，不需要額外的邏輯判斷。

結論

在 JavaScript 中，sort 方法可以通過 (a, b) => a - b 的方式簡化數字排序。

這種用法利用了 sort 方法對於 compareFunction 返回值的判斷邏輯，讓我們不必顯式地回傳 1、0、-1，直接達成數字排序的效果。

這不僅提升了代碼的簡潔度，也符合數值排序的直觀需求。

下次遇到數字排序需求時，不妨使用 (a, b) => a - b，體驗這種便捷的寫法！