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 相关文章推荐
javascript break指定标签打破多层循环示例
Jan 20 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
JS异步宏队列微队列原理详解
Sep 09 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加密解密的代码
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
python实现中文转换url编码的方法
2016/06/14 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
模具设计与制造专业推荐信
2014/02/16 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
迎国庆横幅标语
2014/10/08 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
办公室禁烟通知
2015/04/23 职场文书
考勤制度通知
2015/04/25 职场文书
禁毒心得体会范文
2016/01/15 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript