深入聊聊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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
如何选购合适的收音机
2021/03/01 无线电
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP关联链接常用代码
2012/11/05 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
详解JavaScript中的函数、对象
2019/04/01 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
布达拉宫导游词
2015/02/02 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
纪检监察立案决定书
2015/06/24 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL