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中单选框和复选框获取值的方式
Nov 06 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript 特殊字符
2007/04/05 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
Python常用模块用法分析
2014/09/08 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
营销计划书
2015/01/17 职场文书