Js数组排序函数sort()介绍


Posted in Javascript onJune 08, 2015

JavaScript实现多维数组、对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。

sort() 方法用于对数组的元素进行排序。语法如下:

arrayObject.sort(sortby)

返回值为对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

function NumAscSort(a,b)
{
 return a - b;
}
function NumDescSort(a,b)
{
 return b - a;
}
var arr = new Array( 3600, 5010, 10100, 801); 
arr.sort(NumDescSort);
alert(arr);
arr.sort(NumAscSort);
alert(arr);

sort(fun)接受了个排序规则函数,这个函数将比较2个数字的大小。而我们的对象数组排序,实际上原理也是一样的。
如果不比较数字的大小,则可以这样:

var myarray=["Apple", "Banana", "Orange"]
myarray.sort()

数组直接调用sort()后,数组按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。
对于对象数组排序,我们先写一个构造比较函数的函数:

//by函数接受一个成员名字符串做为参数
//并返回一个可以用来对包含该成员的对象数组进行排序的比较函数
var by = function(name){
 return function(o, p){
   var a, b;
   if (typeof o === "object" && typeof p === "object" && o && p) {
     a = o[name];
     b = p[name];
     if (a === b) {
       return 0;
     }
     if (typeof a === typeof b) {
       return a < b ? -1 : 1;
     }
     return typeof a < typeof b ? -1 : 1;
   }
   else {
     throw ("error");
   }
 }
}

要排序的数组:

var employees=[]
employees[0]={name:"George", age:32, retiredate:"March 12, 2014"}
employees[1]={name:"Edward", age:17, retiredate:"June 2, 2023"}
employees[2]={name:"Christine", age:58, retiredate:"December 20, 2036"}
employees[3]={name:"Sarah", age:62, retiredate:"April 30, 2020"}

直接调用函数:

employees.sort(by("age"));

到这里,对象数组排序就算基本实现了。那如何实现多个键值排序呢?意思就是先是对age排序,如果age相同,再比较name。
这时,我们可以进一步修改by函数,让其可以接受第二个参数,当主要的键值产生一个匹配的时候,另一个compare方法将被调用以决出高下。

//by函数接受一个成员名字符串和一个可选的次要比较函数做为参数
//并返回一个可以用来包含该成员的对象数组进行排序的比较函数
//当o[age] 和 p[age] 相等时,次要比较函数被用来决出高下
var by = function(name,minor){
 return function(o,p){
   var a,b;
   if(o && p && typeof o === 'object' && typeof p ==='object'){
     a = o[name];
     b = p[name];
     if(a === b){
       return typeof minor === 'function' ? minor(o,p):0;
     }
     if(typeof a === typeof b){
       return a < b ? -1:1;
     }
     return typeof a < typeof b ? -1 : 1;
   }else{
     thro("error");
   }
 }
}

employees.sort(by('age',by('name')));

好了,现在可以放心使用了。如果看不懂,可直接copy 这个by函数到你的应用里面,直接调用即可。

Javascript 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
面包屑导航详解
Dec 07 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
js实现微信聊天界面
Aug 09 Javascript
元素绑定click点击事件方法
Jun 08 #Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 #Javascript
javaScript中with函数用法实例分析
Jun 08 #Javascript
简介JavaScript中的sub()方法的使用
Jun 08 #Javascript
You might like
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
js实现导航跟随效果
2018/11/17 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
财务出纳员岗位职责
2013/11/26 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
小学三年级学生评语
2014/04/22 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
合作与交流自我评价
2015/03/09 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js