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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
js中的string.format函数代码
Aug 11 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
js实现随机8位验证码
Jul 24 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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&amp;mysql(六)
2006/10/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python正则表达式学习小例子
2020/03/03 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
证券期货行业个人的自我评价
2013/12/26 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
商场端午节活动方案
2014/01/29 职场文书
自我评价的范文
2014/02/02 职场文书
小学信息技术教学反思
2014/02/10 职场文书
党员公开承诺书
2014/03/25 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书