JS深入学习之数组对象排序操作示例


Posted in Javascript onMay 01, 2020

本文实例讲述了JS深入学习之数组对象排序功能。分享给大家供大家参考,具体如下:

JavaScript实现多维数组、对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。

sort() 方法用于对数组的元素进行排序。语法如下:

arrayObject.sort(sortby)

返回值为对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。
function NumAscSort(a,b)
{
 return a - b;
}
function NumDescSort(a,b)
{
 return b - a;
}
var arr = new Array( 3600, 5010, 10100, 801); 
arr.sort(NumDescSort);
alert(arr);
arr.sort(NumAscSort);
alert(arr);

sort(fun)接受了个排序规则函数,这个函数将比较2个数字的大小。而我们的对象数组排序,实际上原理也是一样的。

如果不比较数字的大小,则可以这样:

var myarray=["Apple", "Banana", "Orange"]
myarray.sort()

数组直接调用sort()后,数组按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

对于对象数组排序,我们先写一个构造比较函数的函数:

//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函数到你的应用里面,直接调用即可。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 #Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 #Javascript
JavaScript变量Dom对象的所有属性
Apr 30 #Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 #Javascript
VSCode搭建Vue项目的方法
Apr 30 #Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 #Javascript
You might like
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php中请求url的五种方法总结
2017/07/13 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python简易版图书管理系统
2019/08/12 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
详解Laravel制作API接口
2021/05/31 PHP