深入聊聊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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
vue 自定义组件的写法与用法详解
Mar 04 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
JavaScript实现音乐播放器
Aug 14 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检测图片主要颜色的方法
2015/07/01 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
js实现一个简易计算器
2020/03/30 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
大专生简历的自我评价
2013/11/26 职场文书
人事专员的职责
2014/02/26 职场文书
体育活动总结范文
2014/05/04 职场文书
文明工地标语
2014/06/16 职场文书
美术专业自荐信
2014/07/07 职场文书
田径运动会通讯稿
2014/09/13 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
单位租车协议书
2015/01/29 职场文书
财务出纳岗位职责
2015/03/31 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS