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中的Location地址对象
Jan 16 Javascript
javascript window对象属性整理
Oct 24 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
React服务端渲染原理解析与实践
Mar 04 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python2随机数列生成器简单实例
2017/09/04 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
Sql面试题
2013/03/20 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
我的祖国演讲稿
2014/05/04 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL