当前位置:
首页 > temp > JavaScript教程 >
-
js 混合排序(类似中文手机操作系统中的通讯录排序)
在阳光明媚最适合打盹的下午, 特意静音的手机竟然动起来了, 你没看错, 它震动了....
上帝(顾客)来电, "报表查询系统左侧树状菜单中设备的中文名称不能排序", 要增加排序功能....bu la...bu la... , 增加xxx ,增加xxx
开始干吧! 原谅我上面那么多废话...
华丽的分割线
直接上代码
要排序的数据如下图:
下面是代码(废话):
1 // 数字字母中文混合排序 2 function arrSortMinToMax(a, b) { 3 // 判断是否为数字开始; 为啥要判断?看上图源数据 4 if (/^\d+/.test(a.Name) && /^\d+/.test(b.Name)) { 5 // 提取起始数字, 然后比较返回 6 return /^\d+/.exec(a.Name) - /^\d+/.exec(b.Name); 7 // 如包含中文, 按照中文拼音排序 8 } else if (isChinese(a.Name) && isChinese(b.Name)) { 9 // 按照中文拼音, 比较字符串 10 return a.Name.localeCompare(b.Name, 'zh-CN') 11 } else { 12 // 排序数字和字母 13 return a.Name.localeCompare(b.Name, 'en'); 14 } 15 } 16 17 // 检测是否为中文,true表示是中文,false表示非中文 18 function isChinese(str) { 19 // 中文万国码正则 20 if (/[\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d]/.test(str)) { 21 return true; 22 } else { 23 return false; 24 } 25 }
排序结果如下图:
搞定收工!
没错, 实现这个排序实际用了不到20行代码, 开始也当回事, 觉得可以分分钟搞定(不擅长前端的猿), 结果折腾了大半天....
其实排序关键在中文拼音这块, 还有就是"数字开头"的字符串要优先按照前面的数字排序. 好了, 为了实现参阅了以下资料, 有兴趣再优化的同学可以参考以下连接:
http://www.unicode.org/charts/
http://www.unicode.org/reports/tr38/#BlockListing
String.prototype.localeCompare() 详解
https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/string/localecompare#Examples
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数