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 提交和设置表单的值
Dec 19 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP多进程编程实例详解
2017/07/19 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jquery禁用右键示例
2014/04/28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
详解webpack babel的配置
2018/01/09 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
Django发送html邮件的方法
2015/05/26 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python如何实现数据的线性拟合
2019/07/19 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
禁毒宣传标语
2014/06/19 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
民事答辩状范本
2015/05/21 职场文书
推广普通话主题班会
2015/08/17 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL