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实现DIV的一些简单控制
Jun 04 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
Javascript Promise用法详解
May 10 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
php实现多城市切换特效
2015/08/09 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
python中的装饰器详解
2015/04/13 Python
python实现的希尔排序算法实例
2015/07/01 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
keras实现多种分类网络的方式
2020/06/11 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
经典c++面试题五
2014/12/17 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
C++程序员求职信范文
2014/04/14 职场文书
商务经理岗位职责
2014/07/30 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers