博客园 :: 首页 ::  ::  ::  :: 管理

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的时候硬是不知怎么用文字表达为好.
害得大家那么辛苦看我写的解说代码,实在是不好意思!

Feedback

#1楼   回复  引用  查看    

2006-12-01 10:41 by 木野狐      
个人意见,写js 把原本几行代码并成一行写的习惯实在是不好,连插入注释的空间都没有,所以你解释的这么费力,看的也费力。
如果留意看一下微软发布的一些公用类库里面的 js 源码,排版都跟 C# 似的。虽说缩起来写有利于节省带宽,但现在恐怕这方面已经不是最重要了吧。

anyway, 是一篇分析的不错的文章。

#2楼   回复  引用  查看    

2006-12-01 10:47 by Henry Liang      
看得昏昏的,这种排序法是不是和C#里面的ArrayList.Sort(IComparator c)的算法一样?

#3楼   回复  引用    

2006-12-01 10:52 by soctt[未注册用户]
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 },
这一坨函数调来调去,效率怎么样?

#4楼[楼主]   回复  引用  查看    

2006-12-01 12:39 by Go_Rush      
@木野狐
这是写作风格的问题,prototype还算好了。 Jquery更离谱。
整个代码就是一条一条的长链,不过,我还是很喜欢这种风格

#5楼[楼主]   回复  引用  查看    

2006-12-01 12:40 by Go_Rush      
@Henry Liang
不好意思,对C#不熟悉,无法回答你这个问题

#6楼[楼主]   回复  引用  查看    

2006-12-01 12:42 by Go_Rush      
@soctt
效率应该还可以的,毕竟,prototype.js是一个非常成熟的库了。如果要换
成我写,我也会写得和他差不多。

#7楼   回复  引用  查看    

2006-12-01 12:43 by 木野狐      
@Henry Liang
从我的观点看和 C# 的这个原理是一样的吧。不过一个是委托一个是函数指针。

#8楼   回复  引用  查看    

2006-12-02 03:01 by Henry Liang      
谢谢Go_Rush和木野狐。prototype的确很赞!

#9楼   回复  引用  查看    

2006-12-05 15:16 by 布尔      
弱智看不懂的人不要叫嚣

#10楼   回复  引用  查看    

2006-12-07 09:55 by MS的明天      
我觉得这个就像C#2。0里面的匿名方法,看上去还是比较酷的。
还有就是prototype的代码风格,刚开始看的时候很不爽,但时间长了,就习惯了。

#11楼   回复  引用    

2007-01-16 16:12 by QQ鱼[未注册用户]
prototype.js是个不错的库,问问各位还知不知道其它的比较好的JavaScript库?

#12楼[楼主]   回复  引用  查看    

2007-01-16 16:28 by Go_Rush      
@QQ鱼
JQuery 对 dom,css,xpath,ajax 的支持都很强

#13楼   回复  引用    

2007-08-24 09:13 by 风情主人[未注册用户]
sort其实并没有什么神奇之处,他们我也仔细阅读过. 很多地方大有需要改良的地方. 因此我重新实现了一个Jcore.js, 近期我将同时出书,到时候发给大家



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 578443




相关文章:

相关链接: