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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
星际争霸任务指南——神族
2020/03/04 星际争霸
php实现网站留言板功能
2015/11/04 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python迭代器实例简析
2014/09/25 Python
Python中的作用域规则详解
2015/01/30 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
几个人围成一圈的问题
2013/09/26 面试题
业务员岗位职责
2013/11/16 职场文书
给男朋友的道歉信
2014/01/12 职场文书
提拔干部考察材料
2014/05/26 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
转学证明范本
2015/06/19 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫