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 相关文章推荐
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
微信小程序实现图片上传功能
May 28 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
js实现电灯开关效果
Jan 19 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面向对象自动加载机制原理与用法分析
2016/10/14 PHP
php实现数据库的增删改查
2017/02/26 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
致裁判员加油稿
2014/02/08 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers