Javascript数组的排序 sort()方法和reverse()方法

 更新时间:2012年06月04日 15:23:28   作者:  
JavaScript提供了sort()方法和reverse()方法,使得我们可以简单的对数组进行排序操作和逆序操作
其中:

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中数组的排序,由于默认按照字符串排序,要实现按照其他形式的规则排序就要自己定义比较函数了。

相关文章

  • 原生js实现无限循环轮播图效果

    原生js实现无限循环轮播图效果

    本文主要介绍了原生js实现无限循环轮播图效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 原生JS实现动态添加新元素、删除元素方法

    原生JS实现动态添加新元素、删除元素方法

    这篇文章主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 微信小程序实现星级评分与展示

    微信小程序实现星级评分与展示

    这篇文章主要为大家详细介绍了微信小程序实现星级评分与展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript  cookie 跨域访问之广告推广

    JavaScript cookie 跨域访问之广告推广

    这篇文章主要介绍了JavaScript cookie 跨域访问之广告推广 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 深入理解JS中的substr和substring

    深入理解JS中的substr和substring

    下面小编就为大家带来一篇深入理解JS中的substr和substring。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • JS根据生日月份和日期计算星座的简单实现方法

    JS根据生日月份和日期计算星座的简单实现方法

    这篇文章主要介绍了JS根据生日月份和日期计算星座的简单实现方法,涉及javascript日期时间与字符串操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • js仿淘宝放大镜效果

    js仿淘宝放大镜效果

    这篇文章主要为大家详细介绍了js仿淘宝放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Javascript中classList的基本使用方法

    Javascript中classList的基本使用方法

    classList 是一个非常实用的工具,可以让我们轻松地操作元素的类名,在使用 classList 时,我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名,接下来我们详细学习一下classList的使用方法以及相关方法,感兴趣的朋友一起看看吧
    2023-10-10
  • 一道JS前端闭包面试题解析

    一道JS前端闭包面试题解析

    这篇文章主要针对一道JS前端闭包面试题进行解析,从例题出发详细介绍JS前端闭包相关知识,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js+ajax实现的A*游戏路径算法整理

    js+ajax实现的A*游戏路径算法整理

    js+ajax实现的A*游戏路径算法整理...
    2007-05-05

最新评论