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下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
require.js的用法详解
Oct 20 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue-cli 如何打包上线的方法示例
May 08 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 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 curl基本操作详解
2013/07/23 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
制作特殊字的脚本
2006/06/26 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
JS常见算法详解
2017/02/28 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python如何给你的程序做性能测试
2020/07/29 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Etam德国:内衣精品店
2019/08/25 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
大学生助学金感谢信
2015/01/21 职场文书
邀请书模板
2015/02/02 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
南京南京观后感
2015/06/02 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Win11更新失败并提示0xc1900101
2022/04/19 数码科技