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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
vue-router 学习快速入门
Mar 01 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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与javascript对多项选择的处理
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
公司门卫岗位职责
2014/03/15 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
安全标语口号
2014/06/09 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Django如何与Ajax交互
2021/04/29 Python