JavaScript中文字排序主要使用localeCompare()方法，该方法基于Unicode码位或指定语言环境进行排序，能正确处理中文拼音、笔画等复杂情况，基本用法为arr.sort((a, b) => a.localeCompare(b, 'zh-CN'))，其中第二个参数'zh-CN'指定中文环境，还可通过sensitivity配置（如'base'忽略大小写和重音），对对象数组排序时，需指定属性，如arr.sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'))，此方法兼容主流浏览器，是处理中文排序的首选方案。
JavaScript文字排序方法详解：从基础到进阶
在前端开发中,数据排序是常见的需求，尤其是对字符串（文字）进行排序时，不同场景下可能需要不同的排序规则（如拼音、笔画、自定义顺序等），JavaScript提供了多种文字排序方法，本文将从基础到进阶，详细介绍这些方法的实现原理、使用场景及注意事项。
基础排序：Array.prototype.sort() 的默认行为
JavaScript中数组排序最常用的方法是Array.prototype.sort()，该方法会直接修改原数组，并返回排序后的数组引用。
默认排序规则：按 Unicode 编码排序
sort()方法在不传参时，默认将数组元素转换为字符串，然后按Unicode编码值从小到大排序。
const arr = ['banana', 'Apple', 'cat', '123', '苹果']; arr.sort(); console.log(arr); // ['123', 'Apple', 'banana', 'cat', '苹果']
从结果可以看出：
- 数字字符串
'123'排在最前（Unicode编码值最小）； - 英文按字母顺序排序,但
'Apple'（首字母大写）排在'banana'（首字母小写）之前，因为大写字母的Unicode编码值（65-90）小于小写字母（97-122）； - 中文字符
'苹果'排在最后，因为中文字符的Unicode编码值通常大于英文和数字。
默认排序的局限性
默认排序规则显然无法满足实际开发需求：
- 大小写敏感：无法实现不区分大小写的排序（如
'Apple'和'apple'应视为相同）； - 中文无序：无法按拼音、笔画等中文常用规则排序；
- 数字错误：若数组包含数字，直接排序会导致数值错误（如
[10, 2]会排序为[10, 2]，而非[2, 10]）。
英文文字排序：处理大小写与自定义顺序
不区分大小写的排序
通过toLowerCase()或toUpperCase()统一字符串大小写，再进行比较：
const arr = ['banana', 'Apple', 'cat', 'apple']; arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); console.log(arr); // ['Apple', 'apple', 'banana', 'cat']
这里使用了localeCompare()方法，通过统一大小写，实现了'Apple'和'apple'的相邻排序，注意：这种方法保持了原始字符串的大小写形式，只是比较时不区分大小写。
自定义英文顺序
若需按特定顺序排序（如按'a', 'c', 'b'的顺序），可自定义比较函数：
const arr = ['banana', 'cat', 'apple'];
const customOrder = { a: 1, c: 2, b: 3 };
arr.sort((a, b) => {
const firstCharA = a[0].toLowerCase();
const firstCharB = b[0].toLowerCase();
return (customOrder[firstCharA] || 0) - (customOrder[firstCharB] || 0);
});
console.log(arr); // ['apple', 'cat', 'banana']
中文文字排序：拼音、笔画与 localeCompare()
中文排序比英文复杂,常见的规则有拼音排序、笔画排序、部首排序等，JavaScript原生方法中，localeCompare()是处理中文排序的核心工具。
localeCompare() 方法详解
localeCompare()是字符串方法，用于比较两个字符串在特定语言环境中的顺序，返回值为：
- 负数：
a排在b前面； - 正数：
a排在b后面； - 0：
a和b相等。
语法：str.localeCompare(compareString, [locales], [options])
关键参数：
locales：语言环境，如'zh-CN'（简体中文）、'en-US'（英文）；options：配置选项，如sensitivity（区分大小写、重音等）、numeric（是否按数值排序）等。
// 示例：不同语言环境的排序 const arr = ['苹果', 'banana', 'orange']; console.log(arr.sort((a, b) => a.localeCompare(b, 'zh-CN'))); // 中文拼音排序 console.log(arr.sort((a, b) => a.localeCompare(b, 'en-US'))); // 英文字母排序
中文拼音排序
通过设置locales为'zh-CN'，localeCompare()可实现按拼音排序：
const arr = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']; arr.sort((a, b) => a.localeCompare(b, 'zh-CN')); console.log(arr); // ['苹果', '葡萄', '西瓜', '香蕉', '橙子']
结果按拼音首字母排序：苹(p) → 葡(p) → 西(x) → 香(x) → 橙(c)。
处理多音字与生僻字
localeCompare()依赖浏览器和操作系统的语言环境，对多音字（如"重庆"的"重"读chóng或zhòng）可能无法完全准确处理，但能满足大部分场景，对于生僻字，现代浏览器通常能正确支持拼音排序。
中文笔画排序
localeCompare()本身不直接支持笔画排序，需借助第三方库（如pinyin获取拼音，或stroke获取笔画数）或自定义逻辑，以下是使用pinyin库先转换为拼音的示例：
// 需要先安装 pinyin 库
// npm install pinyin
const pinyin = require('pinyin');
const arr = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];
arr.sort((a, b) => {
const pinyinA = pinyin(a, { style: pinyin.STYLE_NORMAL }).flat().join('');
const pinyinB = pinyin(b, { style: pinyin.STYLE_NORMAL }).flat().join('');
return pinyinA.localeCompare(pinyinB);
});
console.log(arr);
高级排序技巧
数值排序
当数组包含数字时,直接排序会导致错误，可以通过比较函数实现正确的数值排序：
const arr = [10, 2, 30, 1, 20]; arr.sort((a, b) => a - b); console.log(arr); // [1, 2, 10, 20, 30]
多字段排序
当需要按多个字段排序时,可以链式比较：
const users = [
{ name: '张三', age: 25 },
{ name: '李四', age: 20 },
{ name: '王五', age: 25 }
];
users.sort((a, b) => {
// 先按年龄升序
if (a.age !== b.age) {
return a.age - b.age;
}
// 年龄相同则按姓名拼音排序
return a.name.localeCompare(b.name, 'zh-CN');
});
console.log(users);
性能优化建议
-
避免在循环中创建函数：比较函数应尽量简洁，避免在循环中创建新函数。
-
使用缓存：对于复杂的排序逻辑，可以预先计算并缓存排序键。
-
考虑数据量：对于大数据集，考虑使用更高效的排序算法或Web Worker进行后台排序。
实际应用场景
表格排序
在数据表格中,用户通常需要对列进行排序：
// 表格列排序示例
function sortTable(column, isAscending) {
const tbody = document.querySelector('#table tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((a
