在 JavaScript 中,sort 方法被广泛用于对数组进行排序。在 ES10 中,又新增了一些非常灵活的排序策略,让 sort 方法变得更加强大和实用。本文将介绍这些新增的排序策略,帮助前端开发者更加高效地进行排序操作。
基本的 sort 排序方法
在介绍新增的排序策略之前,我们先看一下基本的 sort 排序方法。sort 方法是一个在数组上调用的方法,它可以接受一个回调函数作为参数,该回调函数可以决定如何比较两个数组元素。该方法会修改原始数组,并返回排序后的数组。
下面是一个简单的例子,展示了如何使用 sort 方法对一个数组进行排序:
const array = [4, 3, 2, 1]; array.sort(); console.log(array); // [1, 2, 3, 4]
这里我们没有传递任何参数给 sort 方法,因此默认采用字典序排序。如果希望对数字类型的数组进行排序,则需要传递一个回调函数。
const array = [4, 3, 2, 1]; array.sort((a, b) => a - b); console.log(array); // [1, 2, 3, 4]
在这个例子中,我们传递了一个箭头函数作为 sort 方法的参数,这个箭头函数决定了如何比较两个数组元素。该函数返回值小于 0 表示 a 排在 b 前面,返回值大于 0 表示 b 排在 a 前面,返回值等于 0 表示 a 和 b 位置不变。
新增的排序策略
除了了字典排序和数字排序,ES10 还引入了一些非常实用的排序策略,帮助我们更加灵活地进行排序。
1. 字符串排序(Intl.Collator)
对于非 ASCII 字符排序,使用升级版的 Intl.Collator 排序方法可以获得更好的体验。该方法支持多语言,比如中文排序。
下面是一个例子,展示了如何使用 Intl.Collator 对中文字符串进行排序:
// 中文排序
const array = ['橘子', '苹果', '香蕉', '柚子'];
const collator = new Intl.Collator('zh', {sensitivity: 'base'});
array.sort(collator.compare);
console.log(array); // ["柚子", "橘子", "苹果", "香蕉"]在这个例子中,我们通过传递 'zh' 指定了中文排序,通过传递 {sensitivity: 'base'} 限制只考虑基本字符,不考虑音调和重音,这样才能得到正确的排序结果。
2. 数组长度排序(compareByLength)
除了数字和字符串类型,我们还可以使用一个新的 compareByLength 排序策略,根据元素的长度进行排序。
下面是一个例子,展示了如何使用 compareByLength 对数组进行排序:
const array = ['apple', 'banana', 'pear', 'watermelon']; array.sort((a, b) => a.length - b.length); console.log(array); // ["pear", "apple", "banana", "watermelon"]
在这个例子中,我们传递了一个箭头函数作为 sort 方法的参数,该函数通过比较两个字符串的长度来进行排序。
3. 当前位置排序(sortByIndex)
除了传递回调函数进行比较,我们还可以通过在元素上设置一个排序索引,使用新的 sortByIndex 排序策略,根据索引顺序进行排序。
下面是一个例子,展示了如何使用 sortByIndex 对数组进行排序:
const array = [{index: 2, value: 'one'}, {index: 0, value: 'two'}, {index: 1, value: 'three'}];
array.sort((a, b) => a.index - b.index);
console.log(array); // [{index: 0, value: "two"}, {index: 1, value: "three"}, {index: 2, value: "one"}]在这个例子中,我们传递了一个箭头函数作为 sort 方法的参数,该函数通过比较两个元素上的 index 属性来进行排序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67cf9e0fe46428fe9eb46309