在前端开发过程中，我们经常需要对数据进行排序处理。ES10 中的 Array.sort() 方法是常用的一种排序方式。但是，如果不了解其正确使用方法，会导致排序结果不如预期，甚至出现 Bug。本文将介绍 ES10 中 Array.sort() 方法进行文本排序的正确姿势，帮助开发者更好地掌握这一排序技术。
1. Array.sort() 方法的基础使用
前置知识：Array.sort() 方法接收一个可选的回调函数作为参数：
array.sort([compareFunction])
当 compareFunction 未提供时，默认按字母顺序升序排列。
const fruits = ['banana', 'apple', 'orange', 'watermelon']; fruits.sort(); console.log(fruits); // => ["apple", "banana", "orange", "watermelon"]
2. 排序结果的错误案例
在特定的场景下，Array.sort() 可能会返回意外结果。考虑以下场景：
const numbers = [30, 10, 20, 50, 40]; numbers.sort(); console.log(numbers); // => [10, 20, 30, 40, 50]
可以看到，这是一个不正确的结果，因为数字实际应该按数值大小排序。这是因为 sort() 默认排序对象是字符串，而不是数值。因此，数字字符串中 "10" 的 ASCII 码值小于 "2"，"20" 的 ASCII 码值小于 "3"，以此类推。因此，这个排序结果不是按数值大小排序。我们可以通过指定函数 compareFunction 解决这个问题：
const compareNumbers = (a, b) => a - b; const numbers = [30, 10, 20, 50, 40]; numbers.sort(compareNumbers); console.log(numbers); // => [10, 20, 30, 40, 50]
在这个例子中，compareNumbers 函数非常简单，但它确保了数字按正确的数值大小排序。compareNumbers 函数定义了对象间如何进行排序。如果 compareNumbers 函数没有定义，Array.sort() 会默认按照字母排序，这是一个常见的错误。
3. 排序 UTF-8 字符串的正确方式
在以 UTF-8 编码的语言中，如中文、日文和韩文，Array.sort() 默认将字符串排序为根据其 Unicode 值排序的数组。虽然在某些情况下这样的排序方式可能是正确的，但在大多数情况下，我们的排序目标是将字符串按其字符串值排序。
让我们来看一个例子：
const strings = ['我', '是', '一', '个', '前', '端', '开', '发', '者']; strings.sort(); console.log(strings); // => ["一", "个", "前", "则", "开", "发", "者", "我", "是"]
可以看到，这并不是我们所期望的排序结果。在这个数组中，字符 "一" 的 Unicode 值小于 "个"，同样的，字符 "个" 的 Unicode 值小于 "前"。因此，Array.sort() 将 "一" 排在 "个" 的前面。
正确排序方式是指定比较字符串值的函数。sort() 方法默认的排序函数比较的是 Unicode 编码值。因此，我们需要构建一个比较函数，使其按照字符串值进行比较。这个函数可以大致如下：
const zhCompareFunction = (a, b) => a.localeCompare(b, 'zh'); const strings = ['我', '是', '一', '个', '前', '端', '开', '发', '者']; strings.sort(zhCompareFunction); console.log(strings); // => ["个", "开", "前", "发", "者", "一", "我", "是", "端"]
在这个例子中，我们使用了 String.prototype.localeCompare() 函数，该函数将字符串按其字符串值进行排序，而不是按其 Unicode 值排序。因此，我们指定了 "zh" 参数，以确保按中文方式比较字符。
4. 总结
本文介绍了 Array.sort() 的基础用法及其常见的错误。我们介绍了如何构建 compareFunction 来正确排序数字和 UTF-8 编码的字符串。特别是，我们详细介绍了如何指定比较函数以正确排序中文字符串。希望通过这篇文章，你已经了解了如何正确地使用 Array.sort() 方法，从而在你的开发中获得更好的结果。
5. 示例代码
-- -------------------- ---- ------- -- --------- ----- -------------- - --- -- -- - - -- ----- ------- - ---- --- --- --- ---- ----------------------------- --------------------- -- -- ---- --- --- --- --- -- ------------ ----- ----------------- - --- -- -- ------------------ ------ ----- ------- - ----- ---- ---- ---- ---- ---- ---- ---- ----- -------------------------------- --------------------- -- -- ----- ---- ---- ---- ---- ---- ---- ---- ----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1a47ef6b2d6eab3cd4794