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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
$.ajax json数据传递方法
Nov 19 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
javascript 写类方式之九
2009/07/05 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
利用python批量检查网站的可用性
2016/09/09 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python批量爬取下载抖音视频
2019/06/17 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
应届毕业生自我鉴定范文
2013/12/27 职场文书
企业节能减排实施方案
2014/03/19 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
活动总结格式
2014/08/30 职场文书
学生会个人总结范文
2015/02/15 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS