深入聊聊Array的sort方法的使用技巧.詳細點評protype.js中的sortBy方法
更新時間:2007年04月12日 00:00:00 作者:
Array.prototype.sort方法是對數(shù)組進行排序, 該方法帶一個函數(shù)參數(shù),用來指定排序的規(guī)則.
我們先來看看sort 的簡單應用:
var arr=[2,1,3,4];
alert(arr.sort()) // [1,2,3,4] 從小到大排列
//現(xiàn)在由大到小排列 得到 [4,3,2,1]
alert(arr.sort(function(left,right){return left>right?-1:1}))
//這里,sort方法通過參數(shù)函數(shù)的返回值 1或者-1來決定是順排還是倒排
還記得我以前和大家說過的 利用 Function.apply 方法來獲取數(shù)組中的最大元素的方法嗎?
文中用了兩種不同的方法來獲取數(shù)組中的最大值.
現(xiàn)在 sort也可以來秀一下了.
var arr=[2,1,3,4];
var minValue=arr.sort()[0];
var maxValue=arr.sort()[arr.length-1] // arr.sort().pop()
怎么樣,這也是一種另類實現(xiàn)方法吧,還不用寫循環(huán)遍歷.
不過,我必須要指出的是,這種方法的效率是最低的,對于幾十個百來個元素的數(shù)組,你還是可以使用這種技巧.
但是,如果數(shù)組很大,用 sort()方法可以慢得讓你想抽煙
進一步討論 sort 對復雜數(shù)據(jù)結構的排序.
1. 對多維數(shù)組的排序
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("現(xiàn)在按第三列排\n"+arr.sort(function(left,right){return left[2]>right[2]?1:-1}).join("\n"))
alert("現(xiàn)在按第三列倒排\n"+arr.sort(function(left,right){return left[2]>right[2]?-1:1}).join("\n"))
2.對復雜數(shù)據(jù)結構的排序
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函數(shù)):
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 允許傳入一個函數(shù), 并把數(shù)組的每一個元素作為參數(shù)執(zhí)行該函數(shù),最后對函數(shù)返回的結果排序.
下面我來分解他的這個函數(shù).
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
}
比如,現(xiàn)在
arr=[2,1,4,3]
iterator=function(x){return x*x}
1-3行代碼就得到了這樣一個數(shù)組
[
{value:2,criteria:4},
{value:1,criteria:1},
{value:4,criteria:16},
{value:3,criteria:9}
]
4-6行代碼就對數(shù)組按 criteria:進行排序,由小到大.排完得到
[
{value:1,criteria:1},
{value:2,criteria:4},
{value:3,criteria:9},
{value:4,criteria:16}
]
第7行代碼最簡單了,取每個元素的value屬性,最終得到 [1,2,3,4] 實現(xiàn)對arr的sortBy(function...)排序
可能我的語言表達能力有限啊,說prototype.js 的 sortBy的時候硬是不知怎么用文字表達為好.
害得大家那么辛苦看我寫的解說代碼,實在是不好意思!
我們先來看看sort 的簡單應用:
var arr=[2,1,3,4];
alert(arr.sort()) // [1,2,3,4] 從小到大排列
//現(xiàn)在由大到小排列 得到 [4,3,2,1]
alert(arr.sort(function(left,right){return left>right?-1:1}))
//這里,sort方法通過參數(shù)函數(shù)的返回值 1或者-1來決定是順排還是倒排
還記得我以前和大家說過的 利用 Function.apply 方法來獲取數(shù)組中的最大元素的方法嗎?
文中用了兩種不同的方法來獲取數(shù)組中的最大值.
現(xiàn)在 sort也可以來秀一下了.
var arr=[2,1,3,4];
var minValue=arr.sort()[0];
var maxValue=arr.sort()[arr.length-1] // arr.sort().pop()
怎么樣,這也是一種另類實現(xiàn)方法吧,還不用寫循環(huán)遍歷.
不過,我必須要指出的是,這種方法的效率是最低的,對于幾十個百來個元素的數(shù)組,你還是可以使用這種技巧.
但是,如果數(shù)組很大,用 sort()方法可以慢得讓你想抽煙
進一步討論 sort 對復雜數(shù)據(jù)結構的排序.
1. 對多維數(shù)組的排序
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("現(xiàn)在按第三列排\n"+arr.sort(function(left,right){return left[2]>right[2]?1:-1}).join("\n"))
alert("現(xiàn)在按第三列倒排\n"+arr.sort(function(left,right){return left[2]>right[2]?-1:1}).join("\n"))
2.對復雜數(shù)據(jù)結構的排序
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函數(shù)):
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 允許傳入一個函數(shù), 并把數(shù)組的每一個元素作為參數(shù)執(zhí)行該函數(shù),最后對函數(shù)返回的結果排序.
下面我來分解他的這個函數(shù).
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
}
比如,現(xiàn)在
arr=[2,1,4,3]
iterator=function(x){return x*x}
1-3行代碼就得到了這樣一個數(shù)組
[
{value:2,criteria:4},
{value:1,criteria:1},
{value:4,criteria:16},
{value:3,criteria:9}
]
4-6行代碼就對數(shù)組按 criteria:進行排序,由小到大.排完得到
[
{value:1,criteria:1},
{value:2,criteria:4},
{value:3,criteria:9},
{value:4,criteria:16}
]
第7行代碼最簡單了,取每個元素的value屬性,最終得到 [1,2,3,4] 實現(xiàn)對arr的sortBy(function...)排序
可能我的語言表達能力有限啊,說prototype.js 的 sortBy的時候硬是不知怎么用文字表達為好.
害得大家那么辛苦看我寫的解說代碼,實在是不好意思!
相關文章
分享js粘帖屏幕截圖到web頁面插件screenshot-paste
這篇文章主要為大家分享了js粘帖屏幕截圖到web頁面插件screenshot-paste的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03用JavaScript實現(xiàn)使用鼠標畫線的示例代碼
用JavaScript實現(xiàn)用鼠標畫線,具體步驟是首先是畫點,在根據(jù)兩點坐標畫直線,最后是獲取鼠標位置,需要的朋友可以參考下2014-08-08JavaScript數(shù)組排序小程序實現(xiàn)解析
這篇文章主要介紹了JavaScript數(shù)組排序小程序實現(xiàn)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01JavaScript最完整的深淺拷貝實現(xiàn)方式詳解
這篇文章主要為大家詳細介紹了JavaScript最完整的深淺拷貝實現(xiàn)方式,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02js實現(xiàn)根據(jù)文件url批量壓縮下載成zip包
本文主要介紹了js實現(xiàn)根據(jù)文件url批量壓縮下載成zip包,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-02-02JS自定義功能函數(shù)實現(xiàn)動態(tài)添加網(wǎng)址參數(shù)修改網(wǎng)址參數(shù)值
本文自定義JS功能函數(shù)可動態(tài)添加網(wǎng)址參數(shù),修改網(wǎng)址參數(shù)值,具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08