深入聊聊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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
小偷PHP+Html+缓存
2006/11/25 PHP
php类
2006/11/27 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php创建session的方法实例详解
2015/01/27 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Django实现基于类的分页功能
2019/10/31 Python
快速查找Python安装路径方法
2020/02/06 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
幼教个人求职信范文
2013/12/02 职场文书
应届大专生自荐书
2014/06/16 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫