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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js获取 type=radio 值的方法
May 09 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
js实现星星打分效果
Jul 05 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
如何用Python 加密文件
2020/09/10 Python
高级Java程序员面试题
2016/06/23 面试题
党员批评与自我批评
2014/10/15 职场文书
财务工作检讨书
2014/10/29 职场文书
个人典型事迹材料
2014/12/30 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript