深入聊聊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函数
Apr 09 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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中的string类型使用说明
2010/07/27 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Windows下安装Scrapy
2018/10/17 Python
Django ModelForm操作及验证方式
2020/03/30 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
酒店led欢迎词
2014/01/09 职场文书
联谊活动策划书
2014/01/26 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
个人自荐书范文
2015/03/09 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
浅谈Python中的正则表达式
2021/06/28 Python
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android