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创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jquery使用经验小结
May 20 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 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计算数组不为空元素个数的方法
2014/01/27 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
JavaScript命名空间模式实例详解
2019/06/20 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
三个儿子教学反思
2014/02/03 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
工程合作意向书范本
2015/05/09 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js