js sort 二維數(shù)組排序的用法小結(jié)
最近在搞js 排序的問(wèn)題,因?yàn)閿?shù)據(jù)庫(kù)排序太耗資源,如果能轉(zhuǎn)移到客戶端去排序,能大大D減少服務(wù)器內(nèi)存消耗??蛻舳说脑?,除了js,就是as了,可惜我as學(xué)得太爛,所以只能選擇js來(lái)研究研究了。。。經(jīng)過(guò)我的測(cè)試,js內(nèi)置方法sort的效率非常高
我們知道在js中默認(rèn)提供了sort函數(shù),但是這個(gè)函數(shù)默認(rèn)是按照數(shù)組內(nèi)容的ascii碼升序進(jìn)行排列的,如果我們要對(duì)二維數(shù)組排序要如何做呢?在php中是有multi_sort函數(shù)可供調(diào)用的,但是在js中似乎沒(méi)有這種函數(shù),但是沒(méi)關(guān)系 ,因?yàn)閖s的sort函數(shù)其實(shí)也提供了參數(shù)可以定義比較函數(shù)進(jìn)行二維數(shù)組的排序。
1、按數(shù)值排序
假設(shè)有如下數(shù)組
var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]];
這里如果我們要按每個(gè)子數(shù)組的第一列來(lái)排序要如何做呢,我們可以定義一個(gè)比較函數(shù):
arr.sort(function(x, y){
return x[0] – y[0];
});
這里的比較函數(shù)的作用是什么呢?其實(shí)是數(shù)組依次將數(shù)組元素復(fù)制給x,y,比如首先將arr[0]賦給x,arr[1]賦給y,然后用x[0] – y[0],根據(jù)返回的值,如果返回的是大于0的數(shù),那么就把數(shù)組中x放到y(tǒng)的后面,如果返回的是0則不變,小于0則將x放到y(tǒng)的前面,然后第一個(gè)排序好之后在進(jìn)行下面兩個(gè)的排序,直到整個(gè)數(shù)組排序完成。這是默認(rèn)升序的比較函數(shù),如果要降序排列則只需修改比較方式,改為 return y[0] – x[0] 即可,這里我們x[0]表示是按第一列進(jìn)行排序,我們這里也可以按其他列進(jìn)行排序。這里的排序默認(rèn)就會(huì)修改arr的數(shù)組結(jié)構(gòu),所以排序完arr就是按第一列升序的數(shù)組了。
2、按字符串排序
按字符串排序的話呢,我們可以利用js提供的localeCompare方法,
localeCompare作用:用本地特定的順序來(lái)比較兩個(gè)字符串。
localeCompare方法的使用規(guī)則是stringObject.localeCompare(target),如果 stringObject 小于 target,則 localeCompare() 返回小于 0 的數(shù)。如果 stringObject 大于 target,則該方法返回大于 0 的數(shù)。如果兩個(gè)字符串相等,或根據(jù)本地排序規(guī)則沒(méi)有區(qū)別,該方法返回 0,器比較使用的是本地的規(guī)則,本地規(guī)則意思就是使用操作系統(tǒng)底層對(duì)這些本地字符排序的規(guī)則進(jìn)行排序,默認(rèn)情況下比如使用大于號(hào)這樣的比較只是純粹比較兩個(gè)字符的unicode的數(shù)大小,會(huì)與很多語(yǔ)言不符。
比如
var arr = [['中','國(guó)'], ['啊','的'], ['哦','的']];
arr.sort(function(x, y){
return x[0].localeCompare(y[0]);
});
結(jié)果就會(huì)按第一列中文字的拼音排序,如果含有英文的話,默認(rèn)是將英文放在前面,如果是純英文的話,會(huì)按字母順序來(lái),大寫排在小寫的后面,這樣就可以實(shí)現(xiàn)字符串的排序了,包括中文和中英混排。至于要降序排列的話,方法與上面相同,改成return y[0].localeCompare(x[0]); 即可。
這樣排序的問(wèn)題就實(shí)現(xiàn)了,js二維數(shù)組排序用到的地方還是很多的。希望能幫到些人的忙吧
function tblSort(s){
for(r = 0;r < row_len;r++){
arrs[r]=[]
for(c=0;c<cel_len;c++){
arrs[r][c] ={}//二維數(shù)組里再創(chuàng)建一個(gè)對(duì)象;
arrs[r][c].html = table.rows[r].cells[c].innerHTML//取表格HTML放進(jìn)一個(gè)關(guān)聯(lián)數(shù)組里面,用于排序后顯示在頁(yè)面上;
var text = table.rows[r].cells[c].innerText//取得表格的文字內(nèi)容用于下面的判斷;
//檢測(cè)可能出現(xiàn)的內(nèi)容如果不是正常的數(shù)據(jù)就變成負(fù)數(shù),排在最后面;
if(text == '-'){
arrs[r][c].text='-1';
}else if(text=='重新檢測(cè)'){
arrs[r][c].text='-2';
}else if(text=='無(wú)百度快照'||text=='無(wú)排名數(shù)據(jù)'){
arrs[r][c].text='-3'
}else if(text == ''){
arrs[r][c].text='-4'
}else{
arrs[r][c].text=table.rows[r].cells[c].innerText//取表格文字內(nèi)容放進(jìn)一個(gè)關(guān)聯(lián)數(shù)組里面。用于下面的sort做排序。
}
}
}
//alert(arrs[0][0]['text'])
//reve判斷當(dāng)前是正常排序還是反序;
if(reve){
arrs.sort(function(x,y){
return parseFloat(y[s]['text']) - parseFloat(x[s]['text'])
});
reve=0
}else{
arrs.sort(function(x,y){
return parseFloat(x[s]['text']) - parseFloat(y[s]['text'])//排序
})
reve=1
}
//將排好的html內(nèi)容放入表格里
for(r = 0;r < row_len;r++){
for(c=0;c<cel_len;c++){
table.rows[r].cells[c].innerHTML =arrs[r][c]['html']
}
}
}
//表格排序結(jié)束
相關(guān)文章
JavaScript基礎(chǔ)系列之函數(shù)和方法詳解
經(jīng)常談?wù)撈鸷瘮?shù)和方法,也常常搞不清楚它們之間的界限,經(jīng)常把兩個(gè)混用,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)系列之函數(shù)和方法的相關(guān)資料,需要的朋友可以參考下2021-09-09利用Plupload.js解決大文件上傳問(wèn)題, 帶進(jìn)度條和背景遮罩層
本篇文章主要介紹了c#+Plupload.js解決大容量文件上傳問(wèn)題, 帶進(jìn)度條和背景遮罩層,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能(終極版)
這篇文章主要介紹了微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能(終極版),文中給大家提到了最終版與前面2版的不同點(diǎn),需要的朋友可以參考下2019-09-09JavaScript requestAnimationFrame動(dòng)畫詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript requestAnimationFrame動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JavaScript內(nèi)置對(duì)象Math與String詳細(xì)介紹
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象Math與String的介紹與使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08JavaScript日期時(shí)間與時(shí)間戳的轉(zhuǎn)換函數(shù)分享
這篇文章主要介紹了JavaScript日期時(shí)間與時(shí)間戳的轉(zhuǎn)換函數(shù)分享,本文給出兩個(gè)函數(shù)實(shí)現(xiàn)日期時(shí)間和時(shí)間戳間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實(shí)現(xiàn)的ajax異步封裝功能,結(jié)合完整實(shí)例形式分析了原生javascript實(shí)現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下2016-11-11