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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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读取目录所有文件信息dir示例
2014/03/18 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP中的替代语法简介
2014/08/22 PHP
告诉大家什么是JSON
2008/06/10 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python实现日常记账本小程序
2018/03/10 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python爬取微信公众号文章的方法
2019/02/26 Python
详解Python的循环结构知识点
2019/05/20 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
房地产还款计划书
2014/01/10 职场文书
顶岗实习计划书
2015/01/16 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
辞职离别感言
2015/08/04 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers