舉例說明陣列的排序方法有哪些？

王铁柱6發表於2024-11-27
陣列排序

在前端開發中，JavaScript 提供了幾種陣列排序方法，各有優缺點：

1. sort() 方法 (原生)

這是 JavaScript 原生的陣列排序方法。它會直接修改原陣列。

  • 用法： array.sort([compareFunction])

  • 說明：

    • 可選的 compareFunction 用於自定義排序邏輯。如果不提供，sort() 會將元素轉換為字串，然後按照 Unicode 碼點進行排序 (字典序)。這會導致 10 排在 2 前面，因為 "10" 的首字元 "1" 比 "2" 小。
    • compareFunction 接收兩個引數 a 和 b，並返回一個數字：
      • 若返回負數，則 a 排在 b 前面。
      • 若返回正數，則 b 排在 a 前面。
      • 若返回 0，則 a 和 b 的相對順序不變。

  • 例子：

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];

// 預設排序 (字串比較):
numbers.sort(); // [1, 1, 2, 3, 4, 5, 6, 9]  (注意: 實際結果可能是 [1, 1, 2, 3, 4, 5, 6, 9], 因為數字被轉換成字串比較)

// 數值排序:
numbers.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 6, 9]

// 逆序排序:
numbers.sort((a, b) => b - a); // [9, 6, 5, 4, 3, 2, 1, 1]

const fruits = ['apple', 'banana', 'Apple', 'orange'];

// 預設排序 (Unicode 碼點):
fruits.sort(); // ['Apple', 'apple', 'banana', 'orange'] (區分大小寫)

// 不區分大小寫的排序:
fruits.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); // ['apple', 'Apple', 'banana', 'orange']

2. localeCompare() 方法 (用於字串)

專門用於比較字串，並考慮本地化排序規則 (例如不同語言的字母順序)。

  • 用法： stringA.localeCompare(stringB)

  • 例子： 見上面 fruits 的不區分大小寫排序的例子。

3. 外部庫 (Lodash)

Lodash 等庫提供了更豐富的排序功能，例如按物件的屬性排序。

  • 例子：
const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

// 使用 Lodash 按年齡排序:
const sortedUsers = _.sortBy(users, 'age'); // [{ name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 35 }]

選擇哪種方法？

  • 對於簡單的數值或字串陣列，sort() 方法通常足夠。
  • 對於需要考慮本地化排序規則的字串，使用 localeCompare()。
  • 對於複雜的物件陣列或需要更多排序選項，可以考慮使用 Lodash 等外部庫。

重要提示： sort() 方法會直接修改原陣列。如果需要保留原陣列，請先複製一份：

const originalArray = [3, 1, 4, 1, 5];
const newArray = [...originalArray].sort((a, b) => a - b); // newArray 是排序後的陣列，originalArray 保持不變

相關文章