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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实例分享之二维数组排序
2014/05/15 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
JavaScript实现下拉列表
2021/01/20 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python设置环境变量的原因和方法
2019/06/24 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
我的大学生活职业生涯规划
2014/01/02 职场文书
岗位工作说明书
2014/07/29 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
报效祖国演讲稿
2014/09/15 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
微信早安问候语
2015/11/10 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python