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创建数组之联合数组的使用方法示例
Dec 26 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
node.js基础知识小结
Feb 26 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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获取mysql版本的几种方法小结
2008/03/25 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Python实现ping指定IP的示例
2018/06/04 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python实现批量文件重命名
2019/10/31 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python matplotlib实时画图案例
2020/04/23 Python
python小白切忌乱用表达式
2020/05/29 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
蔬菜基地的创业计划书
2014/01/06 职场文书
父母对孩子说的话
2014/04/12 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript