深入聊聊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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
js propertychange和oninput事件
Sep 28 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
phpinfo的知识点总结
2019/10/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
财务学生的职业生涯发展
2014/02/11 职场文书
公司授权委托书
2014/04/04 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2016党员入党决心书
2015/09/22 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers