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 相关文章推荐
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
three.js着色器材质的内置变量示例详解
Aug 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
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
快速了解Python相对导入
2018/01/12 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
基于python实现模拟数据结构模型
2020/06/12 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
学校德育工作总结2015
2015/05/11 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
《检阅》教学反思
2016/02/22 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
pycharm代码删除恢复的方法
2021/06/26 Python
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android