深入聊聊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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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 图像函数大举例(非原创)
2009/06/20 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue表单数据交互提交演示教程
2019/11/13 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
python写日志封装类实例
2015/06/28 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
个人自我鉴定
2013/11/07 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
学前班评语大全
2014/05/04 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
MySQL 数据库范式化设计理论
2022/04/22 MySQL
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
git stash(储藏)的用法总结
2022/06/25 Servers