深入聊聊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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Vue axios设置访问基础路径方法
Sep 19 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php curl_init函数用法
2014/01/31 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python Requests安装与简单运用
2016/04/07 Python
python实现外卖信息管理系统
2018/01/11 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
C语言笔试题
2014/09/04 面试题
新书吧创业计划书
2014/01/31 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
Python软件包安装的三种常见方法
2022/07/07 Python