Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别

使用字典顺序对汉字进行排序(不支持多音字)

不使用拼音库，利用JavaScript的localeCompare方法直接按汉字的字典序排序。localeCompare可以在比较字符串时指定语言及排序规则，它对中文字符排序时，会默认按拼音顺序排列。

const arr = ['南宁', '河池', '柳州', '桂林', '贺州', '梧州'];
const list = [
    {
        id: 1,
        title: '南宁'
    },
    {
        id: 2,
        title: '河池'
    },
    {
        id: 3,
        title: '柳州'
    },
    {
        id: 4,
        title: '桂林'
    },
    {
        id: 5,
        title: '贺州'
    },
    {
        id: 6,
        title: '梧州'
    }
];
let newArr = arr.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
let newList = list.sort((a, b) => a.title.localeCompare(b.title, 'zh-Hans-CN'));

console.log(newArr);
// ["桂林", "河池", "贺州", "柳州", "南宁", "梧州"]
console.log(newList);
// [
//     {
//         "id": 4,
//         "title": "桂林"
//     },
//     {
//         "id": 2,
//         "title": "河池"
//     },
//     {
//         "id": 5,
//         "title": "贺州"
//     },
//     {
//         "id": 3,
//         "title": "柳州"
//     },
//     {
//         "id": 1,
//         "title": "南宁"
//     },
//     {
//         "id": 6,
//         "title": "梧州"
//     }
// ]

在示例中，使用localeCompare的第二个参数’zh-Hans-CN’，指定简体中文和中国的排序规则。localeCompare会根据拼音顺序排序汉字，而不需要任何额外的拼音库。
sort方法接受一个比较函数，localeCompare用于比较两个字符串的字典顺序。
'zh-Hans-CN’指定简体中文的语言和地区代码，以确保对汉字进行拼音顺序排序。
这种方法在大多数现代浏览器和Node.js环境中都支持。

编码顺序和字典顺序的区别

编码顺序和字典顺序是两种不同的排序方式，特别是在处理中文字符时，这两种顺序差异显著。

---

1、编码顺序
编码顺序基于字符在计算机字符集(如Unicode)中的编码值来排序。在编码顺序中，字符的位置和大小顺序完全由它的编码值决定，而不考虑字符的语言或意义。
原理
计算机将每个字符映射为一个二进制数值，称为编码。对于中文字符来说，Unicode会为每个汉字分配一个独特的编码。因此，当按编码顺序排列汉字时，实际上是按照它们的编码值大小从小到大排列。
特点
编码顺序是纯粹的二进制排序，不涉及语言的语义。
对于同一字符集(如Unicode)中的字符，这种排序方式非常快，但对中文用户来说没有任何实际的语义或拼音顺序可言。
假设有汉字列表["张", "王", "李", "赵"]，编码顺序可能会排列成["李", "王", "张", "赵"]，因为它们在Unicode表中的顺序就是这样，但这并不符合字典或拼音顺序。
适用场景
这种排序方式在需要统一编码的场景中有用，例如存储或快速查找数据。但它不适合用户展示，因为不符合直观的语言排序。

---

2、字典顺序
字典顺序是基于自然语言的排序方式。在中文中，字典顺序可以基于拼音顺序或部首笔画顺序，这两种方法可以在实际使用中帮助人们更容易地找到和整理文字。

---

2.1、拼音顺序
这是现代电子设备和软件最常用的字典顺序，基于汉字的拼音字母排序。
原理
每个汉字可以被转换成拼音，按拼音的字母顺序排列汉字列表。拼音字母较小的字在前，较大的字在后。
例子
对于同一列表["张", "王", "李", "赵"]，按拼音排序会得到["李", "王", "张", "赵"]，符合中文字典的拼音查找顺序。

---

2.2、部首笔画顺序
这是传统字典中常用的另一种顺序，基于汉字的部首和笔画数。
原理
首先按部首排列，然后按剩余笔画数从少到多排序。需要根据每个汉字的部首和笔画数进行对比。
例子
如果用部首笔画法排序同样的列表["张", "王", "李", "赵"]，结果可能会是["李", "王", "赵", "张"]，取决于部首的顺序以及剩余笔画数。

---

3、编码顺序与字典顺序的对比

特点	编码顺序	字典顺序
排序依据	字符编码的数值	自然语言的拼音或部首笔画
是否符合直觉	否，不考虑语言语义	是，更符合人类阅读和查找习惯
计算速度	快，按二进制数值排序	较慢，需要语言规则和转换
适用场景	原始数据处理、索引等	用户展示、文字查找等

---

4、JavaScript示例
在JavaScript中，可以利用localeCompare来实现字典顺序的拼音排序，而编码顺序可以直接使用sort方法按Unicode编码排序。

---

编码顺序

const words = ["张", "王", "李", "赵"];

words.sort();
console.log(words);  
// ["李", "王", "张", "赵"]

---

字典顺序(拼音)

const words = ["张", "王", "李", "赵"];

words.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
console.log(words);  
// ["李", "王", "张", "赵"]

---

localeCompare指定简体中文的排序规则，可以按照拼音顺序对汉字排序。

---

5、总结
编码顺序基于字符的二进制编码值，快速但不符合直观语言规则。
字典顺序基于拼音或部首笔画，符合人类查阅习惯，但需要更多计算和语言支持。
在实际应用中，字典顺序更符合用户的需求，编码顺序更适合数据的内部存储。

sort与localeCompare的介绍

sort和localeCompare是JavaScript中两个与排序相关的功能，但它们的工作方式和适用场景有所不同。

---

1、sort方法
Array.prototype.sort() 是 JavaScript 用来对数组进行排序的方法，它可以直接对数组中的元素按编码顺序进行排序，也可以通过传递比较函数自定义排序规则。
工作原理
默认排序：如果sort不传入任何参数，则按编码顺序(即字符串的Unicode编码)进行排序，这对数字或字符串的基本排序是有效的，但对中文和其他语言符号排序可能会显得混乱。
自定义排序：可以向sort传递一个比较函数自定义排序规则。比较函数应返回一个负数、零或正数，分别表示较小、相等或较大，用于确定元素的排序。
示例

// 编码顺序(默认排序)
const words = ["张", "王", "李", "赵"];

words.sort();
console.log(words);  
// ["李", "王", "张", "赵"]

// 自定义排序(如按长度排序)
const numbers = [1, 5, 2, 10];

numbers.sort((a, b) => a - b);
console.log(numbers);  
// 1, 2, 5, 10]

特点
默认编码顺序：sort默认使用编码顺序排序，可能不符合特定语言的字典排序规则。
需要提供比较函数：为了实现更复杂的排序逻辑，通常会结合localeCompare等方法来提供比较函数。

---

2、localeCompare方法
String.prototype.localeCompare()是JavaScript中用于比较两个字符串的方法，支持指定语言及排序规则。localeCompare会根据区域语言的特定排序规则来确定字符串的顺序，因此适合处理自然语言中的排序问题。
工作原理
localeCompare方法会比较两个字符串，并返回负数、0或正数。
负数：表示当前字符串在排序中应排在参数字符串之前。
0：表示两个字符串在排序中位置相同。
正数：表示当前字符串在排序中应排在参数字符串之后。
可以为localeCompare指定语言和地区(如zh-Hans-CN)，从而按照拼音顺序对中文字符进行排序。
示例

// 使用localeCompare比较字符串的字典顺序
const words = ["张", "王", "李", "赵"];

words.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
console.log(words);
// ["李", "王", "张", "赵"]

特点
按语言排序规则：localeCompare能够根据指定的语言进行排序，适用于需要特定语言字典顺序的场景。
自定义灵活性：通过在localeCompare中指定不同的区域代码，可以对多语言内容进行排序。

---

3、sort和localeCompare的组合使用
在实际应用中，sort常常和localeCompare结合使用，以实现多语言环境中的自然排序。sort负责排序的整体流程，而localeCompare提供特定的语言比较规则。

const words = ["苹果", "香蕉", "橙子", "菠萝", "西瓜"];

words.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
console.log(words);
// ["菠萝", "橙子", "苹果", "西瓜", "香蕉"]

---

4、总结对比

特性	sort	localeCompare
主要用途	对数组进行排序	比较两个字符串的顺序
默认行为	按编码顺序(Unicode)排序	按指定语言的字典序进行比较
适合语言	对多语言支持较弱	支持多语言排序
是否传入参数	可选传入比较函数	可指定语言和比较选项
常见组合	与localeCompare结合使用以实现自然语言排序	用作sort的比较函数

---

5、使用场景建议
如果只是简单的编码排序，可以直接使用sort()。
如果需要按语言规则排序(如拼音)，使用sort((a, b) => a.localeCompare(b, ‘语言’))。