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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
基于jquery的放大镜效果
May 30 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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邮件类
2007/01/03 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
商务英语毕业生自荐信范文
2013/11/08 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
小组口号大全
2014/06/09 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
张思德观后感
2015/06/09 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs