深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法


Posted in Javascript onApril 12, 2007

Array.prototype.sort方法是对数组进行排序, 该方法带一个函数参数,用来指定排序的规则.

我们先来看看sort 的简单应用:

var arr=[2,1,3,4];
alert(arr.sort())  // [1,2,3,4] 从小到大排列

//现在由大到小排列  得到 [4,3,2,1]
alert(arr.sort(function(left,right){return left>right?-1:1}))

//这里,sort方法通过参数函数的返回值 1或者-1来决定是顺排还是倒排

还记得我以前和大家说过的 利用 Function.apply 方法来获取数组中的最大元素的方法吗?
文中用了两种不同的方法来获取数组中的最大值.
现在 sort也可以来秀一下了.

var arr=[2,1,3,4];
var minValue=arr.sort()[0];
var maxValue=arr.sort()[arr.length-1]   //  arr.sort().pop()

 怎么样,这也是一种另类实现方法吧,还不用写循环遍历. 
不过,我必须要指出的是,这种方法的效率是最低的,对于几十个百来个元素的数组,你还是可以使用这种技巧.
但是,如果数组很大,用 sort()方法可以慢得让你想抽烟

进一步讨论 sort 对复杂数据结构的排序.
1. 对多维数组的排序

var arr=[
             [2,1,55,4],
             [5,3,22,3],
             [1,2,77,2],
             [9,4,33,5],
          ];                 
alert("默认按第一列排\n"+arr.sort().join("\n"))  
alert("现在按第三列排\n"+arr.sort(function(left,right){return left[2]>right[2]?1:-1}).join("\n"))  
alert("现在按第三列倒排\n"+arr.sort(function(left,right){return left[2]>right[2]?-1:1}).join("\n"))  
2.对复杂数据结构的排序

Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}
function showName(item){alert(item.name)}; //打印名字

var arr=[
             {name:"bill",money:500},
             {name:"go_rush",money:400},
             {name:"dudu",money:9000}
          ];                 
//依次显示 dudu,bill,go_rush 看来dudu是最有钱的,而我是最穷的
arr.sort(function(left,right){return left.money>right.money?-1:1}).each(showName) 

 3.对表格的排序,这个话题我昨天和大家聊过了.  
参见:
http://www.cnblogs.com/ashun/archive/2006/11/30/appendChild_table_sort.html

 更复杂的表格排序(也是用Array的sort函数): 
http://community.csdn.net/expert/Topicview2.asp?id=5174915

 4. Protype.js 中对 sort有一个构思非常巧妙的扩展,先看他的代码

1   sortBy: function(iterator) {
2     return this.collect(function(value, index) {
3       return {value: value, criteria: iterator(value, index)};
4     }).sort(function(left, right) {
5       var a = left.criteria, b = right.criteria;
6       return a < b ? -1 : a > b ? 1 : 0;
7     }).pluck('value');
8   },

 这个 sortBy 允许传入一个函数, 并把数组的每一个元素作为参数执行该函数,最后对函数返回的结果排序.
下面我来分解他的这个函数.
collect方法实际就是 map方法.相当于
Array.prototype.map=function(f){
       for(var i=0;ret=[];i<this.length;i++)  ret[i]=f(this[i],i,this)
      return ret
}

 比如,现在 
arr=[2,1,4,3]
iterator=function(x){return x*x}

1-3行代码就得到了这样一个数组 
[
   {value:2,criteria:4},
   {value:1,criteria:1},
   {value:4,criteria:16},
   {value:3,criteria:9}
]

4-6行代码就对数组按 criteria:进行排序,由小到大.排完得到
[
   {value:1,criteria:1},
   {value:2,criteria:4},
   {value:3,criteria:9},
   {value:4,criteria:16}
]

第7行代码最简单了,取每个元素的value属性,最终得到 [1,2,3,4]  实现对arr的sortBy(function...)排序

可能我的语言表达能力有限啊,说prototype.js 的 sortBy的时候硬是不知怎么用文字表达为好.
害得大家那么辛苦看我写的解说代码,实在是不好意思!

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
摘自启点的main.js
Apr 20 Javascript
JQuery this 和 $(this) 的区别
Aug 23 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue实现倒计时功能
Mar 24 Vue.js
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 #Javascript
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 #Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 #Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 #Javascript
无语,javascript居然支持中文(unicode)编程!
Apr 12 #Javascript
几个高效,简洁的字符处理函数
Apr 12 #Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
express 项目分层实践详解
2018/12/10 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
销售主管岗位职责
2014/02/08 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
会议简报格式范文
2015/07/20 职场文书
《包身工》教学反思
2016/02/23 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python