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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python subprocess模块详细解读
2018/01/29 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
小学师德标兵先进事迹材料
2014/05/25 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技