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的几种方法小结
Apr 25 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
javascript里使用php代码实例
Dec 13 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js实现无缝滚动特效
Dec 20 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JavaScript 异步调用
Oct 25 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
简单分析js中的this的原理
Aug 31 Javascript
Vue实现简单的跑马灯
May 25 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP7内核之Reference详解
2019/03/14 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
JavaScript 数组详解
2013/10/10 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
结束运行python的方法
2020/06/16 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
优秀女职工事迹材料
2014/02/06 职场文书
专业技术职务聘任书
2014/03/29 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
排查整治工作方案
2014/06/09 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
欠款起诉书范文
2015/05/19 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers