JS中使用sort结合localeCompare实现中文排序实例


Posted in Javascript onJuly 23, 2014

说到表格排序,首先要说的就一定是数组的排序,因为数组排序是表格排序的基础。

JavaScript为数组提供了sort()方法用于表格排序,默认情况下该方法会使Array中的数组按照ASCII码的顺序进行排列,JavaScript还为数组提供了数组倒序的方法reverse()。

看一下示例:

 function sortArray(){

             var arrayTest = ["z",5,2,"a",32,3];

             arrayTest.sort();

             alert(arrayTest.toString());     //output:2,3,32,5,a,z

             arrayTest.reverse();

             alert(arrayTest.toString());    //output:z,a,5,32,3,2

         }

         sortArray();

呵呵,5比32还要大,很明显这不是我们想要的结果,刚才已经说过sort()方法是按照ASCII码的顺序排序的。

其实sort()方法还允许带一个函数类型的的参数,我们可以称之为比较函数,当该比较函数又可以接收两个参数,以下该函数返回值的意义:

-1:第一个参数 小于 第二个参数

0:第一个参数 等于 第二个参数

1:第一个参数 大于 第二个参数
/**

  * 比较函数

  * @param {Object} param1 要比较的参数1

           * @param {Object} param2 要比较的参数2

           * @return {Number} 如果param1 > param2 返回 1

           *                     如果param1 == param2 返回 0

           *                     如果param1 < param2 返回 -1

           */

          function compareFunc(param1,param2){

             //如果两个参数均为字符串类型

             if(typeof param1 == "string" && typeof param2 == "string"){

                 return param1.localeCompare(param2);

             }

             //如果参数1为数字,参数2为字符串

             if(typeof param1 == "number" && typeof param2 == "string"){

                 return -1;

             }

             //如果参数1为字符串,参数2为数字

             if(typeof param1 == "string" && typeof param2 == "number"){

                 return 1;

             }

             //如果两个参数均为数字

             if(typeof param1 == "number" && typeof param2 == "number"){

                 if(param1 > param2) return 1;

                 if(param1 == param2) return 0;

                 if(param1 < param2) return -1;

             }

         }

当我们执行arrayTest.sort(compareFunc)时我们就得到了正确的结果。
到这里,我们不得不说明一下localeCompare()方法的用法,该方法是对字符串进行排序的方法,只有一个参数即要比较的字符串。

具体说明如下:

1、如果String对象按照字母顺序排在参数中的字符串之前,返回负数
2、如果String对象按照字符顺序排在参数中的字符串之后,返回正数
3、如果String对象等于参数中的字符串返回0

除此之外,localeCompare()方法还有一个独特之处,这个独特之处可以在其方法签名locale(现场、当地)上得以体现,也就是说他的实现时按照区域特性来的,如果在英语体系中,他的实现可能是按照字符串升序,如果在汉语中,他的实现则是按照首字母的拼音。

呵呵,这也就是说就算我们在程序中涉及汉字,我们的排序也不回出错。
参考以下程序:

var testArray = ["脚","本","之","家"];

         document.write(testArray.sort(

             function compareFunction(param1,param2){

                 return param1.localeCompare(param2);  //output:之,家,本,脚

             }

         ));
Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
微信小程序支付前端源码
Aug 29 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
JS在IE下缺少标识符的错误
Jul 23 #Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 #Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 #Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 #Javascript
jQuery获取节点和子节点文本的方法
Jul 22 #Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 #Javascript
JavaScript匿名函数与委托使用示例
Jul 22 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python with语句的原理与用法详解
2020/03/30 Python
python如何调用字典的key
2020/05/25 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python把一个字符串切开的实例方法
2020/09/27 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
师范生实习自我鉴定
2013/11/01 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
腾讯广告词
2014/03/19 职场文书
求职意向书
2014/04/01 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
户外活动总结
2015/02/04 职场文书
行政上诉状范文
2015/05/23 职场文书
情感电台广播稿
2015/08/18 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript