javascript中sort() 方法使用详解


Posted in Javascript onAugust 30, 2015

语法: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()的特性。

Javascript 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
javascript中的正则表达式使用详解
Aug 30 #Javascript
jQuery鼠标事件汇总
Aug 30 #Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 #Javascript
jquery专业的导航菜单特效代码分享
Aug 29 #Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 #Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
You might like
五款PHP代码重构工具推荐
2014/10/14 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
前端微信支付js代码
2016/07/25 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
在Python的web框架中配置app的教程
2015/04/30 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
全面了解python字符串和字典
2016/07/07 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python视频按帧截取图片工具
2019/07/23 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
请解释在new与override的区别
2012/10/29 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
洗发水广告词
2014/03/13 职场文书
公民授权委托书
2014/10/15 职场文书
安全承诺书格式范本
2015/04/28 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android