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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
Vue通过懒加载提升页面响应速度
May 10 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
图解上海144收音机
2021/03/02 无线电
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python 实现链表实例代码
2017/04/07 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
struct和class的区别
2015/11/20 面试题
Android面试题附答案
2014/12/08 面试题
模具专业毕业生自荐书范文
2014/02/19 职场文书
大学专科求职信
2014/07/02 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
python 详解turtle画爱心代码
2022/02/15 Python