怎么在JavaScript中對數組對象進行排序

怎么在JavaScript中對數組對象進行排序？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

一、普通數組排序　　

　　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"}]

關于怎么在JavaScript中對數組對象進行排序問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。