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 相关文章推荐
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 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
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
简述php环境搭建与配置
2016/12/05 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
python快速查找算法应用实例
2014/09/26 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python框架中flask知识点总结
2018/08/17 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
在pycharm中实现删除bookmark
2020/02/14 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016教师国培研修感言
2015/12/08 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL