深入聊聊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 处理表单元素的代码
Feb 15 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
vue实现登录功能
Dec 31 Vue.js
vuex的使用和简易实现
Jan 07 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
实用函数4
2007/11/08 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
学Python 3的理由和必要性
2019/11/19 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
linux面试题参考答案(9)
2016/01/29 面试题
J2EE系统只能是基于web
2015/09/08 面试题
咨询公司各岗位职责
2013/12/02 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
python+opencv实现视频抽帧示例代码
2021/06/11 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript