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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
vue.js轮播图组件使用方法详解
Jul 03 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
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php微信开发之关注事件
2018/06/14 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
如何用python批量调整视频声音
2020/12/22 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
绩效工资实施方案
2014/03/15 职场文书
职位说明书范文
2014/05/07 职场文书
家长会标语
2014/06/24 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
车辆年审委托书范本
2014/09/18 职场文书
人事局接收函
2015/01/30 职场文书
学校计划生育责任书
2015/05/09 职场文书
党支部季度考核意见
2015/06/02 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python