javascript中sort() 方法使用详解

 更新时间:2015年08月30日 15:05:21   投稿:hebedich  
sort()方法主要是用于对数组进行排序,默认情况下该方法是将数组元素转换成字符串,然后按照ASC码进行排序,这个大家都能理解,但如果数组元素是一个Object呢,转不了字符串,难道不能进行排序?答案当然是否定的,那么我们就来详细探讨下sort()方法的使用

语法:arrayObject.sort(sortby);参数sortby可选。规定排序顺序。必须是函数。

sort() 方法用于对数组的元素进行排序。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,

首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b,其返回值如下:

 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

 若 a 等于 b,则返回 0。

 若 a 大于 b,则返回一个大于 0 的值。

 用js中的sort()方法排序数字

<script>
  var arr = [23,12,1,34,116,8,18,37,56,50];
  alert(arr.sort();
</script>

   返回:[1, 116, 12, 18, 23, 34, 37, 50, 56, 8]

上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数:

<script>
  var arr = [23,12,1,34,116,8,18,37,56,50];
  function sequence(a,b){
    if (a>b) {
      return 1;
    }else if(a<b){
      return -1
    }else{
      return 0;
    }
  }
  console.log(arr.sort(sequence));
</script>

  返回:[1, 8, 12, 18, 23, 34, 37, 50, 56, 116] (没有问题)

当然也可以把排序函数写到sort()方法里面:

<script>
  var arr = [23,12,1,34,116,8,18,37,56,50];
  var arr2 = arr.sort(function(a,b){
     if (a>b) {
      return 1;
    }else if(a<b){
      return -1
    }else{
      return 0;
    }  
  })
  console.log(arr2);
</script>

  返回:[1, 8, 12, 18, 23, 34, 37, 50, 56, 116] (也没有问题)

也可以简化成这样的写法
因为:若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值

 <script>
   var arr = [23,12,1,34,116,8,18,37,56,50];
   function sequence(a,b){
     return a - b;
   }
   console.log(arr.sort(sequence));
 </script>

返回:[1, 8, 12, 18, 23, 34, 37, 50, 56, 116] (也是正确的)

关系字母顺序进行排序 就简单多了,直接用sort()方法就OK了:

 <script>
   var arr = ['fanda','banner','find','zoom','index','width','javascript'];
   console.log(arr.sort());
 </script>

返回:["banner", "fanda", "find", "index", "javascript", "width", "zoom"]

 现在在学习javascript中,发现sort()函数是有点奇怪的东西(可能是本人水平的问题-_-!),于是就在这里记录一下自己找到的东西吧。sort()这个方法的参数很奇怪,必须是函数,但也是可选参数,如果没有参数的话,就会默认以字符串的字典顺序来排列(就算是数值,也会被转化为字符串来处理)。这个参数是要能够比较两个值的大小,如:

复制代码 代码如下:

function sortNumber(a, b){
   return a - b; //这里返回的是他们的差值,如果是小于0的值,就会将a排在前面,如果大于0,就会将b排在前面,如果是0的话,就随便。(冒泡排序法!!)
}

 应用如下(这个例子太经典了!!):

<script type="text/javascript">
function sortNumber(a,b){return a - b}
var arr = new Array(3)
arr[0] = "10";
arr[1] = "5";
arr[2] = "4";
document.write(arr + "<br />");
document.write(arr.sort(sortNumber));
</script>

那么原本是10,5,4的排列就会变成4,5,10.这里说明一下这个过程,明明sortNumber应该是有两个参数,但是我们在调用时却一个参数都没有,怎么进行比较啊?这里是这样的,当arr从第一个数开始调用sort时,10前面是没有数与它比较的,所以就到第二个,就是5,这时10就会与5比较,于是就会调用sortNumber并将10和5传进去,这是sort()的特性。

相关文章

  • 操作按钮悬浮固定在微信小程序底部的实现代码

    操作按钮悬浮固定在微信小程序底部的实现代码

    在一些购物平台经常需要将商品加入购物车,像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的,怎么实现这样的功能呢?下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码,一起看看吧
    2019-08-08
  • Bootstrap在线电子商务网站实战项目5

    Bootstrap在线电子商务网站实战项目5

    这篇文章主要为大家分享了Bootstrap在线电子商务网站实战项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 利用JavaScript编写Python内置函数查询工具

    利用JavaScript编写Python内置函数查询工具

    Python有丰富的内置函数实现各种功能,但查询内置函数时总是需要百度查,有没有一个小工具可以单机无网络查询Python内置函数,方便自己学习编写Python程序呢?本文就来用JavaScript编写一个
    2023-02-02
  • 使用js解决由border属性引起的div宽度问题

    使用js解决由border属性引起的div宽度问题

    由于border属性引起的div宽度问题,确实很让人头疼,在本文将为大家介绍下使用JS是如何解决的,感兴趣的朋友不要错过
    2013-11-11
  • JavaScript实现留言板案例

    JavaScript实现留言板案例

    这篇文章主要为大家详细介绍了JavaScript实现留言板案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS 实现Table相同行的单元格自动合并示例代码

    JS 实现Table相同行的单元格自动合并示例代码

    Table相同行的单元格自动合并,使用js来实现此效果,具体代码下,感兴趣的朋友可以参考下
    2013-08-08
  • JS获取浮动(float)元素的style.left值为空的快速解决办法

    JS获取浮动(float)元素的style.left值为空的快速解决办法

    这篇文章主要介绍了JS获取浮动(float)元素的style.left值为空的快速解决办法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • jqgrid 表格数据导出实例

    jqgrid 表格数据导出实例

    jqgrid并没有自带导出表格数据的方法,这里就自己实现了一个,尝试过在页面直接将数据导出,发现只有IE下可以通过调用saveas来实现,但是别的浏览器不支持,于是考虑将数据传回后台,然后后台返回下载文件来实现
    2013-11-11
  • 微信小程序获取当前位置的详细步骤

    微信小程序获取当前位置的详细步骤

    微信小程序开发中选择地理位置就需要通过官方文档API去判断用户是否授权地理位置,用户开启授权后可直接获取地理位置,下面这篇文章主要给大家介绍了关于微信小程序获取当前位置的详细步骤,需要的朋友可以参考下
    2022-12-12
  • 基于JavaScript实现带数据验证和复选框的表单提交

    基于JavaScript实现带数据验证和复选框的表单提交

    这篇文章主要介绍了基于JavaScript实现带数据验证和复选框的表单提交功能,需要的朋友可以参考下
    2017-08-08

最新评论