深入聊聊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 的说明 js类
Sep 07 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
一个可复用的vue分页组件
May 15 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
vue视频播放暂停代码
Nov 08 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生成略缩图代码
2012/07/16 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python编程中time模块的一些关键用法解析
2016/01/19 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pycharm运行scrapy过程图解
2019/11/22 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
工程业务员岗位职责
2013/12/31 职场文书
好学生评语大全
2014/05/05 职场文书