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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
Vue组件化开发思考
Feb 02 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
javaScript Array api梳理
Mar 31 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
Zend Framework页面缓存实例
2014/06/25 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
javascript 打印页面代码
2009/03/24 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python面向对象编程基础解析(二)
2017/10/26 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
某公司部分笔试题
2013/11/05 面试题
户外用品商店创业计划书
2014/01/29 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
2014年创卫工作总结
2014/11/24 职场文书
政协工作总结2015
2015/05/20 职场文书
毕业生学校组织意见
2015/06/04 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
JavaScript设计模式之原型模式详情
2022/06/21 Javascript