怎么在JavaScript中對數(shù)組對象進(jìn)行排序?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
成都創(chuàng)新互聯(lián)專注于前進(jìn)網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供前進(jìn)營銷型網(wǎng)站建設(shè),前進(jìn)網(wǎng)站制作、前進(jìn)網(wǎng)頁設(shè)計、前進(jìn)網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造前進(jìn)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供前進(jìn)網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
一、普通數(shù)組排序
js中用方法sort()為數(shù)組排序。sort()方法有一個可選參數(shù),是用來確定元素順序的函數(shù)。如果這個參數(shù)被省略,那么數(shù)組中的元素將按照ASCII字符順序進(jìn)行排序。如:
var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"]
因為字母A、B的ASCII值分別為65、66,而a、b的值分別為97、98,所以上面輸出的結(jié)果是 ["A", "B", "a", "b"] 。
如果數(shù)組元素是數(shù)字呢,結(jié)果會是怎樣?
var arr = [15, 8, 25, 3]; arr.sort(); console.log(arr);//[15, 25, 3, 8]
結(jié)果是 [15, 25, 3, 8] 。其實,sort方法會調(diào)用每個數(shù)組項的toString()方法,得到字符串,然后再對得到的字符串進(jìn)行排序。雖然數(shù)值15比3大,但在進(jìn)行字符串比較時"15"則排在"3"前面。顯然,這種結(jié)果不是我們想要的,這時,sort()方法的參數(shù)就起到了作用,我們把這個參數(shù)叫做比較函數(shù)。
比較函數(shù)接收兩個參數(shù),如果第一個參數(shù)應(yīng)該位于第二個之前則返回一個負(fù)數(shù),如果兩個參數(shù)相等則返回0,如果第一個參數(shù)應(yīng)該位于第二個之后則返回一個正數(shù)。例子:
var arr = [23, 9, 4, 78, 3]; var compare = function (x, y) {//比較函數(shù) if (x < y) { return -1; } else if (x > y) { return 1; } else { return 0; } } console.log(arr.sort(compare));
結(jié)果為 [3, 4, 9, 23, 78] ,返回了我們想要的結(jié)果。如果要按降序排序,比較函數(shù)寫成這樣即可:
var compare = function (x, y) { if (x < y) { return 1; } else if (x > y) { return -1; } else { return 0; } }
我們并不能用比較函數(shù)比較一個不能轉(zhuǎn)化為數(shù)字的字符串與數(shù)字的順序:
var arr = ["b", 5];
console.log(arr.sort(compare))
結(jié)果是 ["b", 5] 。因為比較函數(shù)在比較時,會把先把字符串轉(zhuǎn)化為數(shù)字,然后再比較,字符串b不能轉(zhuǎn)化為數(shù)字,所以就不能比較大小。然而,當(dāng)不用比較函數(shù)時,會比較ASCII值,所以結(jié)果是 [5, "b"] 。
二、數(shù)組對象排序
如果數(shù)組項是對象,我們需要根據(jù)數(shù)組項的某個屬性對數(shù)組進(jìn)行排序,要怎么辦呢?其實和前面的比較函數(shù)也差不多:
var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}]; var compare = function (obj1, obj2) { var val1 = obj1.name; var val2 = obj2.name; if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } console.log(arr.sort(compare));
輸出結(jié)果為 [Object { name="wlz", age=25}, Object { name="zlw", age=24}] ,可以看到數(shù)組已經(jīng)按照 name 屬性進(jìn)行了排序。我們可以對上面的比較函數(shù)再改造一下:
var compare = function (prop) { return function (obj1, obj2) { var val1 = obj1[prop]; var val2 = obj2[prop];if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } }
如果想按照 age 進(jìn)行排序, arr.sort(compare("age")) 即可。
但是對age屬性進(jìn)行排序時需要注意了,如果age屬性的值是數(shù)字,那么排序結(jié)果會是我們想要的。但很多時候我們從服務(wù)器傳回來的數(shù)據(jù)中,屬性值通常是字符串?,F(xiàn)在我把上面的數(shù)組改為:
var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];
可以看到,我把 age 屬性由數(shù)字改為了字符串,第二個數(shù)組項的 age 值改為了 "5" 。再次調(diào)用 arr.sort(compare("age")) 后,結(jié)果為:
[Object { name="zlw", age="24"}, Object { name="wlz", age="5"}]
我們的期望是5排在25前面,但是結(jié)果不是。這是因為當(dāng)兩個數(shù)字字符串比較大小時,會比較它們的ASCII值大小,比較規(guī)則是:從第一個字符開始,順次向后直到出現(xiàn)不同的字符為止,然后以第一個不同的字符的ASCII值確定大小。所以"24"與"5"比較大小時,先比較”2“與"5"的ASCII值,顯然”2“的ASCII值比"5"小,即確定排序順序。
現(xiàn)在,我們需要對比較函數(shù)再做一些修改:
var compare = function (prop) { return function (obj1, obj2) { var val1 = obj1[prop]; var val2 = obj2[prop]; if (!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1 = Number(val1); val2 = Number(val2); } if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } }
在比較函數(shù)中,先把比較屬性值轉(zhuǎn)化為數(shù)字 Number(val1) 再通過 !isNaN(Number(val1)) 判斷轉(zhuǎn)化后的值是不是數(shù)字(有可能是NaN),轉(zhuǎn)化后的值如果是數(shù)字,則比較轉(zhuǎn)換后的值,這樣就可以得到我們想要的結(jié)果了, 調(diào)用 arr.sort(compare("age")) 得到:
[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]
關(guān)于怎么在JavaScript中對數(shù)組對象進(jìn)行排序問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。