![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yM0IjY4czMhNzYkNmMjZ2Y2YDZwMTZ3ImZlNWZ5QTN58CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
js中的數組對象排序 - 那時候的我 - 部落格園www.cnblogs.com
一、普通數組排序
js中用方法sort()為數組排序。sort()方法有一個可選參數,是用來确定元素順序的函數。如果這個參數被省略,那麼數組中的元素将按照ASCII字元順序進行排序。如:
var arr = ["a", "b", "A", "B"];
arr.sort();
console.log(arr);//["A", "B", "a", "b"]
因為字母A、B的ASCII值分别為65、66,而a、b的值分别為97、98,是以上面輸出的結果是 ["A", "B", "a", "b"] 。
如果數組元素是數字呢,結果會是怎樣?
var arr = [15, 8, 25, 3];
arr.sort();
console.log(arr);//[15, 25, 3, 8]
結果是 [15, 25, 3, 8] 。其實,sort方法會調用每個數組項的toString()方法,得到字元串,然後再對得到的字元串進行排序。雖然數值15比3大,但在進行字元串比較時"15"則排在"3"前面。顯然,這種結果不是我們想要的,這時,sort()方法的參數就起到了作用,我們把這個參數叫做比較函數。
比較函數接收兩個參數,如果第一個參數應該位于第二個之前則傳回一個負數,如果兩個參數相等則傳回0,如果第一個參數應該位于第二個之後則傳回一個正數。例子:
var arr = [23, 9, 4, 78, 3];
var compare = function (x, y) {//比較函數
if (x < y) {
return -1;
} else if (x > y) {
return 1;
} else {
return 0;
}
}
console.log(arr.sort(compare));
結果為 [3, 4, 9, 23, 78] ,傳回了我們想要的結果。如果要按降序排序,比較函數寫成這樣即可:
var compare = function (x, y) {
if (x < y) {
return 1;
} else if (x > y) {
return -1;
} else {
return 0;
}
}
我們并不能用比較函數比較一個不能轉化為數字的字元串與數字的順序:
var arr = ["b", 5];
console.log(arr.sort(compare))
結果是 ["b", 5] 。因為比較函數在比較時,會把先把字元串轉化為數字,然後再比較,字元串b不能轉化為數字,是以就不能比較大小。然而,當不用比較函數時,會比較ASCII值,是以結果是 [5, "b"] 。
二、數組對象排序(屬性&數值//皆可排序)
如果數組項是對象,我們需要根據數組項的某個屬性對數組進行排序,要怎麼辦呢?其實和前面的比較函數也差不多:
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));
輸出結果為 [Object { name="wlz", age=25}, Object { name="zlw", age=24}] ,可以看到數組已經按照 name 屬性進行了排序。我們可以對上面的比較函數再改造一下:
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 進行排序, arr.sort(compare("age")) 即可。
但是對age屬性進行排序時需要注意了,如果age屬性的值是數字,那麼排序結果會是我們想要的。但很多時候我們從伺服器傳回來的資料中,屬性值通常是字元串。現在我把上面的數組改為:
var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];
可以看到,我把 age 屬性由數字改為了字元串,第二個數組項的 age 值改為了 "5" 。再次調用 arr.sort(compare("age")) 後,結果為:
[Object { name="zlw", age="24"}, Object { name="wlz", age="5"}]
我們的期望是5排在25前面,但是結果不是。這是因為當兩個數字字元串比較大小時,會比較它們的ASCII值大小,比較規則是:從第一個字元開始,順次向後直到出現不同的字元為止,然後以第一個不同的字元的ASCII值确定大小。是以"24"與"5"比較大小時,先比較”2“與"5"的ASCII值,顯然”2“的ASCII值比"5"小,即确定排序順序。
現在,我們需要對比較函數再做一些修改:
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;
}
}
}
在比較函數中,先把比較屬性值轉化為數字 Number(val1) 再通過 !isNaN(Number(val1)) 判斷轉化後的值是不是數字(有可能是NaN),轉化後的值如果是數字,則比較轉換後的值,這樣就可以得到我們想要的結果了, 調用 arr.sort(compare("age")) 得到:
[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]
可以看到,确實是按正确的方式排序了。
這篇文章所講的都是基礎的,沒什麼技術含量,隻是最近項目中遇到了對數組對象進行排序的問題,是以在這裡寫出來分享一下,相信總能幫到一些朋友。