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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
vue项目中全局引入1个.scss文件的问题解决
Aug 01 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中通过curl smtp发送邮件
2012/06/05 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
比较完整的微信开发php代码
2016/08/02 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
js对象基础实例分析
2015/01/13 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python 学习教程之networkx
2019/04/15 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python如何查看网页代码
2020/06/07 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2015年底工作总结范文
2015/05/15 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书