深入聊聊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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
一个用js实现控制台控件的代码
Sep 04 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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 if 想到的些问题
2008/03/22 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
小程序文字跑马灯效果
2018/12/28 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
vue实现图片上传功能
2020/05/28 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python手机号码归属地查询代码
2016/05/04 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python实现代码统计程序
2019/09/19 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
8种常用的Python工具
2020/08/05 Python
Python tkinter实现日期选择器
2021/02/22 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
葬礼司仪主持词
2014/03/31 职场文书
校园标语大全
2014/06/19 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2015年教研工作总结
2015/05/23 职场文书
六一文艺汇演主持词
2015/06/30 职场文书