Javascript数组的排序 sort()方法和reverse()方法


Posted in Javascript onJune 04, 2012

其中:

1.JavaScript的sort()中如果没有指定比较函数,则默认会按照字符的编码顺序进行升序排序。也就是说如果我们想要对数值进行排序得到的不一定是我们想要的结果。

2.Javascript的reverse()将数组中的元素逆序。

先看看上面的第一点,如果有一个数组arr=[1,6,3,7,9],使用arr.sort()后,数组的顺序为1,3,6,7,9,得到了我们想要的结果。

再看看下面的一个数组排序:arr=[3,1,16,34,30],如果执行arr.sort()后是不是还是会得到我们想要的1,3,16,30,34呢?

执行后我们发现结果为:1,16,3,30,34,显然结果不是我们想要的。实际上,sort方法将上面的数值按照字符串方式排序了,也就是说和数组arr1=['3','1','16','34','30']的排序结果一致。

代码如下:

var arr=[3,1,16,34,30]; 
var arr1=['3','1','16','34','30']; 
alert(arr.sort()); // 1,16,3,30,34 
alert(arr1.sort()); // 1,16,3,30,34

那么如果我们想要得到正确的结果:1,3,16,30,34 应该怎么去做呢?

查询javascript手册,手册中的说明如下:

定义和用法

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

语法

arrayObject.sort(sortby)参数 描述
sortby 可选。规定排序顺序。必须是函数。

返回值

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

说明

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

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

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
=====================================

由以上说明我们可以了解到,如果要按照数值进行排序,那么就要提供一个比较函数。一般常见的比较函数如下:

function sortArr(m,n){ 
if(m<n) 
return -1;//小于,返回-1 
else if(m>n) 
return 1;//大于,返回1 
else return 0;//等于,返回0 
}

精简后可以写成如下两种形式:
function sortArr(m,n){ 
return m-n; 
}

function sortArr(m,n){ 
return m>n?1:(m<n?-1:0); 
}

然后执行arr.sort(sortArr),发现可以得到我们想要的结果:1,3,16,30,34.也就说将数组按照整型数值进行了升序排序。
这样的话新的问题就来了,如果我们想要对数组进行降序排序怎么做呢?

有一思路就是改变sortArr函数的返回值,如果m<n时返回正直,m>n时返回负值,m=n时返回0。这样就可以了。

你可以写两个函数,一个升序,一个降序。然后根据不同的需要调用不同的函数就可以了。

此外我们还可以调用上面提到的另一个函数reverse()来轻松的实现,当我们进行升序排序后,然后数组在调用reverse()方法将数组逆序,这样就可以实现数组的降序排序了。

代码如下:

arr.sort(sortArr).reverse();

总结:这里主要介绍了Javascript中数组的排序,由于默认按照字符串排序,要实现按照其他形式的规则排序就要自己定义比较函数了。
Javascript 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
javascript中获取下个月一号,是星期几
Jun 01 #Javascript
一行代码告别document.getElementById
Jun 01 #Javascript
javascript的console.log()用法小结
May 31 #Javascript
jQuery 联动日历实现代码
May 31 #Javascript
从阶乘函数对比Javascript和C#的异同
May 31 #Javascript
javascript 快速排序函数代码
May 30 #Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 #Javascript
You might like
浅谈ThinkPHP的URL重写
2014/11/25 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python 的topk算法实例
2020/04/02 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
区域总监的岗位职责
2013/11/21 职场文书
高一数学教学反思
2014/02/07 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2015年售票员工作总结
2015/04/29 职场文书
DSP接收机前端设想
2022/04/05 无线电