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中的几个运算符
Jun 29 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
Node.js学习入门
Jan 03 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
vue 实现动态路由的方法
Jul 06 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
php7安装yar扩展的方法详解
2017/08/03 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python字符串查找函数的用法详解
2019/07/08 Python
python的re模块使用方法详解
2019/07/26 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
用Python解数独的方法示例
2019/10/24 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
优秀的导游求职信范文
2014/04/06 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
英语专业求职信
2014/07/08 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016年春节问候语
2015/11/11 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript