js中的數組對象排序

一、普通數組排序

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

? ? ? ?可以看到,確實是按正確的方式排序了,如果排序順序反了,將compare進行對應 。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • PHP常用函數大全 usleep() 函數延遲代碼執行若干微秒。 unpack() 函數從二進制字符串對數據進行解...
    上街買菜丶迷倒老太閱讀 1,388評論 0 20
  • 親愛的湘: 你好。我是40歲的你,當你看到這封信的時候應該50歲啦。 雖然已是50,容顏老去,那時的...
    清若0215閱讀 235評論 2 1
  • 1.昨夜入睡比較晚,今晨還是五點半起來了,繼續做練習題。謝謝,謝謝,謝謝! 2.今天要到培訓機構,去上綜合能力的沖...
    ZZY710910閱讀 154評論 0 0
  • 每隔一段時間,都會有新聞爆出“變態校長”與“變態老師”,好像壞的老師都集中在了幼兒園與小學。難道幼師的門檻就那么低...
    閱伴教育閱讀 707評論 1 0