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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
Node.js编码规范
Jul 14 Javascript
js实现继承的5种方式
Dec 01 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 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
PHP概述.
2006/10/09 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
vue实现信息管理系统
2020/05/30 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
会计专业的自荐信
2013/12/12 职场文书
书法培训心得体会
2014/01/05 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
学员自我鉴定
2014/03/19 职场文书
小学生综合素质评语
2014/04/23 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
培训通知书模板
2015/04/17 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers