深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
发这个文章有两个目的。
1。真的想和大家探讨一下Array对象的 sort的用法和技巧
2。借机推广和宣传一下我的Blog (纯技术 Ajax,JavaScript,Dom.....)
博客地址： http://ashun.cnblogs.com/
/********************************************************************/
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的时候硬是不知怎么用文字表达为好.
害得大家那么辛苦看我写的解说代码,实在是不好意思!
问题点数：200、回复次数：19Top
1 楼Go_Rush（我的技术博客http://ashun.cnblogs.com/）回复于 2006-12-08 09:29:51 得分 0
沙发自己坐Top
2 楼muxrwc（厕所宣言：信念永不变，追猫永不弃。）回复于 2006-12-08 09:38:41 得分 0
先UP。。。在LOOKTop
3 楼li1229363（）回复于 2006-12-08 09:46:54 得分 0
嘿嘿～谢谢分享～现在出于新手阶段，所以需要这样的东西啊～谢谢楼主！Top
4 楼woneinwy（★★★★★★★★★★@しǒひê）回复于 2006-12-08 10:08:19 得分 0
学习Top
5 楼hbhbhbhbhb1021（天外水火(我要多努力)）回复于 2006-12-08 10:46:04 得分 0
友情UPTop
6 楼hbhbhbhbhb1021（天外水火(我要多努力)）回复于 2006-12-08 12:09:34 得分 0
我也来一个不用循环的
<SCRIPT language=JavaScript>
var a=new Array()
a=[1,5,777,33,742343,23453,634534]
alert(a[2])
alert(Math.max(eval(a.join(","))))
</SCRIPT>
Top
7 楼Go_Rush（我的技术博客http://ashun.cnblogs.com/）回复于 2006-12-08 13:09:19 得分 0
var arr=[1,2,5,6,3,1]
alert(Math.max.apply(null,arr)) //6Top
8 楼Go_Rush（我的技术博客http://ashun.cnblogs.com/）回复于 2006-12-08 13:10:47 得分 0
to hbhbhbhbhb1021(天外水火(我要多努力))
呵呵，你肯定没有看我的博客
var arr=[1,2,5,6,3,1]
alert(Math.max.apply(null,arr)) //6
这个方法其实我在博客上已经讨论了
http://www.cnblogs.com/ashun/archive/2006/11/28/574681.aspxTop
9 楼CutBug（.NetZergling）回复于 2006-12-08 13:40:34 得分 0
楼主，怎么名字看上去像玩SC的Top
10 楼wuxinlangman（无心之尘 上来看看）回复于 2006-12-08 13:45:09 得分 0
顶下接分Top
11 楼hbhbhbhbhb1021（天外水火(我要多努力)）回复于 2006-12-08 13:48:05 得分 0
呵呵，恩，今天白天有些事情，晚上回去看Top
12 楼CutBug（.NetZergling）回复于 2006-12-08 17:28:29 得分 0
to 倒排:
arr.sort().reverse()Top
13 楼btbtd（签名加载中...请稍候...单击...双击ok）回复于 2006-12-08 19:08:13 得分 0
...哈哈, 没话好讲,
不过发现偶的JS函数库有不少东西...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var ar=[65,172,47,117,5,75,6,151,180,153,188,197,125,197,66,90,150,19,101,198,141,176,47,146,51];
var ar_=['中国', '英国','美国', '加拿大', '一', '二'];
document.write('字符正序: ',fArOdr(ar_, 1),'<br/>');
document.write('字符反序: ',fArOdr(ar_, 2),'<p/>');
document.write('数字正序: ',fArOdr(ar, 3),'<br/>');
document.write('数字反序: ',fArOdr(ar, 4),'<br/>');
/*----------------------------------------*\
* javascript 数组正反向排序 By shawl.qiu
* 参数说明:
* array: 数组对象, 要排序的数组.
* pram, 数值, 2: 字串反向排序; 3: 数字正向排序; 4: 数字反向排序; 其他: 正则排序
\*----------------------------------------*/
//--------------------begin function fArOdr(array, type, pram)--------------//
function fArOdr(array, pram){
if(!pram)var pram=1;
switch(pram){
case 2: return array.reverse();
case 3: return array.sort(function(a,b){return a-b;});
case 4: return array.sort(function(a,b){return b-a;});
default: return array.sort();
}
} // shawl.qiu script
//--------------------end function fArOdr(array, type, pram)----------------//
//]]>
</script>Top
14 楼btbtd（签名加载中...请稍候...单击...双击ok）回复于 2006-12-08 19:11:41 得分 0
顺便问个问题, 大家如果觉着JS该了解的已经了解了, 那之后干什么..迷惘中...Top
15 楼shiliangdong（Stou）回复于 2006-12-08 21:46:22 得分 0
ＭａｒｋTop
16 楼hbhbhbhbhb1021（天外水火(我要多努力)）回复于 2006-12-11 11:46:11 得分 0
顶下，看了下楼主的博客，期待以后的连载，:)Top
17 楼championmajian（小马||目前酒力：白的半斤，啤的3瓶）回复于 2006-12-11 14:11:18 得分 0
占位学习Top
18 楼blue7208（）回复于 2006-12-19 18:43:39 得分 0
学习!Top
19 楼wwx840723（你娃儿不给老子好好读书，老子把你送到国家队切，丢尽你的脸！让你娃儿无脸见人）回复于 2006-12-19 19:26:35 得分 0
大哥
帮我看一下这个帖子~
http://community.csdn.net/Expert/topic/5227/5227101.xml?temp=8.030337E-02
急~Top
