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代码放在head和body中的区别分析
Dec 01 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
javascript检测两个数组是否相似
May 19 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
JS变量提升及函数提升实例解析
Sep 03 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
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript新手语法小结
2008/06/15 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Django缓存系统实现过程解析
2019/08/02 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
wxPython实现分隔窗口
2019/11/19 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
网络编辑求职信
2014/04/30 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
演讲开场白台词大全
2015/05/29 职场文书
医院病假条怎么写
2015/08/17 职场文书