对数组中的元素排序

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方法

对数组中的元素排序首发于聚享小站，如果对您有帮助，不要忘记点赞支持一下呦🎉