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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
jQuery filter函数使用方法
May 19 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
从零开始搭建一个react项目开发
Feb 09 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
js脚本中执行java后台代码方法解析
Oct 11 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/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
js编写选项卡效果
2017/05/23 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python内置数据类型详解
2014/08/18 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python处理中文标点符号大集合
2018/05/14 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python变量命名的7条建议
2019/07/04 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python3实现绘制二维点图
2019/12/04 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
python 通过文件夹导入包的操作
2020/06/01 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python给list排序的简单方法
2020/12/10 Python
python实现计算器简易版
2020/12/17 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
大学生实习思想汇报
2014/01/12 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
黄埔军校观后感
2015/06/10 职场文书
收入证明怎么写
2015/06/12 职场文书