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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JQuery中clone方法复制节点
May 18 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
javascript每日必学之封装
Feb 23 Javascript
浅析创建javascript对象的方法
May 13 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue组件name的作用小结
2018/05/23 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python如何发布程序的详细教程
2018/10/09 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
《春到梅花山》教学反思
2014/04/16 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
python实现简单的聊天小程序
2021/07/07 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL