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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
Node.js 的 GC 机制详解
Jun 03 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Element Alert警告的具体使用方法
Jul 27 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
简单的js计算器实现
2016/10/26 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
党员个人思想汇报
2013/12/28 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2015年推普周活动方案
2015/05/06 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Python中time与datetime模块使用方法详解
2022/03/31 Python