對數組中的元素排序

1. 背景

在進行數據展示的時候，有時候後端返回我們的數據不符合我們的要求，在數據量較小的情況下，前端去處理數據的排序可能更合適，下面是幾種常用的數據排序方式。

2. 字符串數組排序

簡單回顧下數組的sort方法，默認排序順序是升序，也就是將元素轉換爲字符串，然後比較它們的 UTF-16 代碼單元值序列，比如說['March', 'jan', 'Feb', 4, 3, 'dec'].sort()返回的是[3, 4, 'Feb', 'March', 'dec', 'jan']，數字的單元值 < 大寫英文字母 < 小寫英文字母

因此對於格式一致的英文單詞排序，直接用sort方法即可

const months = ['March', 'Jan', 'Feb', 'Dec'];
// 升序: ['Dec', 'Feb', 'Jan', 'March']
months.sort()

// 倒序: ['March', 'Jan', 'Feb', 'Dec']
months.sort().reverse()

3. 數值數組排序

由於sort方法是按照字符串的單元值排的，因此直接對數字進行排序不能達到我們的效果，比如說[1, 30, 4, 21, 100000].sort()返回的是[1, 100000, 21, 30, 4]。這時候可以給sort方法傳一個compareFunction：

sort((firstEl, secondEl) => { /* ... */ } )

// 升序：[1, 4, 21, 30, 100000]
[1, 30, 4, 21, 100000].sort((firstEl, secondEl) => firstEl - secondEl)

// 降序：[100000, 30, 21, 4, 1]
[1, 30, 4, 21, 100000].sort((firstEl, secondEl) => secondEl - firstEl)

4. 對象數組排序

同樣的對於對象數組，我們直接使用localeCompare比較元素的返回值。

referenceStr.localeCompare(compareString)本身會返回一個數字，表示引用字符串是在比較字符串順序之前、之後還是與給定字符串相同。如果是之前出現，則爲負數；如果是之後，則爲正；如果它們相等，則爲 0。

const arr = [{name: 'Jamf'}, {name: 'Bodine'}, {name: 'Prentice'}]

// [{name: 'Bodine'}, {name: 'Jamf'}, {name: 'Prentice'}]
arr.sort((a, b) => a.name.localeCompare(b.name))

對於中文排序也同樣適用

// ['李四', '王五', '小二', '張山']
['小二', '張山', '李四', '王五'].sort((a, b) => a.localeCompare(b))

補充資料1：localeCompare使用方法
補充資料2：數組的sort方法

對數組中的元素排序首發於聚享小站，如果對您有幫助，不要忘記點贊支持一下呦🎉