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 相关文章推荐
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jQuery中的select操作详解
Nov 29 Javascript
浅谈React高阶组件
Mar 28 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue总线机制(bus)知识点详解
May 10 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实现LOL数据远程获取
2014/06/10 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js获取class的所有元素
2013/03/28 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
座谈会主持词
2014/03/20 职场文书
小学生家长寄语
2014/04/02 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
暑假安全保证书
2015/02/28 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
JS数组去重详情
2021/11/07 Javascript