JavaScript对象数组排序实例方法浅析


Posted in Javascript onJune 15, 2016

 在javascript中实现多维数组、对象数组排序,基本上都是用原生的sort()方法,用于对数组的元素进行排序。

其基本的用法就不说了,先看个简单的排序例子:

//Sort
alphabetically and ascending:
var
myarray=["Bob",
"Bully",
"Amy"]
myarray.sort()
//Array
now becomes ["Amy", "Bob", "Bully"]

数组直接调用sort()后,数组按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

再来看看数字的排序:

//Sort
numerically and ascending:
var
myarray=[25, 8, 7, 41]
myarray.sort(function(a,b){return
a - b}) //Array
now becomes [7, 8, 25, 41]

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

对于对象数组排序,我们先写一个构造比较函数的函数:

//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 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
jQuery动态加载css文件实现方法
Jun 15 #Javascript
异步加载JS、CSS代码(推荐)
Jun 15 #Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 #Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 #Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 #Javascript
You might like
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript模拟push
2016/03/06 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
班主任工作经验材料
2014/02/02 职场文书
物流业务员岗位职责
2014/02/08 职场文书
高二学生评语大全
2014/04/25 职场文书
初中成绩单评语
2014/12/29 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang