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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
微信小程序 教程之引用
Oct 18 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
vue如何实现关闭对话框后刷新列表
Apr 08 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 memcache扩展的三种安装方法
2009/04/26 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python中super函数用法实例分析
2019/03/18 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
十八大闭幕感言
2014/01/22 职场文书
行政助理工作职责范本
2014/03/04 职场文书
党员大会主持词
2014/04/02 职场文书
车辆工程专业求职信
2014/04/28 职场文书
村容村貌整治方案
2014/05/21 职场文书
教师节标语大全
2014/10/07 职场文书
运动员代表致辞
2015/07/29 职场文书
感谢信
2019/04/11 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android