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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
js html实现计算器功能
Nov 13 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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类
2006/07/15 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
python生成excel的实例代码
2017/11/08 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
投标单位介绍信
2014/01/09 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
志愿者服务感言
2014/02/27 职场文书
公司会议策划方案
2014/05/17 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
税务会计岗位职责
2015/04/02 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript