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 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
python入门教程 python入门神图一张
2018/03/05 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python制作词云图代码实例
2019/09/09 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
蔬菜基地的创业计划书
2014/01/06 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
工作总结与自我评价
2014/09/18 职场文书
关于五一放假的通知
2015/08/18 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
创业计划书之熟食店
2019/10/16 职场文书