VOOZH about

URL: https://read01.com/M2Dk2P.html

⇱ js中的數組對象排序 - 壹讀


Sunday, Apr 12, 2026

js中的數組對象排序

2014/04/27 來源:cnblogs

js中用方法sort為數組排序。sort方法有一個可選參數,是用來確定元素順序的函數。如果這個參數被省略,那麼數組中的元素將按照ASCII字符順序進行排序。如:

vararr = ["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"]

如果數組元素是數字呢,結果會是怎樣?

vararr = [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,如果第一個參數應該位於第二個之後則返回一個正數。例子:

vararr = [23, 9, 4, 78, 3];varcompare =function(x, y) {//比較函數if(x <y) {return-1; }elseif(x >y) {return1; }else{return0; } } console.log(arr.sort(compare));

結果為 [3, 4, 9, 23, 78],返回了我們想要的結果。如果要按降序排序,比較函數寫成這樣即可:

varcompare =function(x, y) {if(x <y) {return1; }elseif(x >y) {return-1; }else{return0; } }

我們並不能用比較函數比較一個不能轉化為數字的字符串與數字的順序:

vararr = ["b", 5]; console.log(arr.sort(compare))

結果是 ["b", 5]。因為比較函數在比較時,會把先把字符串轉化為數字,然後再比較,字符串b不能轉化為數字,所以就不能比較大小。然而,當不用比較函數時,會比較ASCII值,所以結果是 [5, "b"]

二、數組對象排序

如果數組項是對象,我們需要根據數組項的某個屬性對數組進行排序,要怎麼辦呢?其實和前面的比較函數也差不多:

vararr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];varcompare =function(obj1, obj2) {varval1 =obj1.name;varval2 =obj2.name;if(val1 <val2) {return-1; }elseif(val1 >val2) {return1; }else{return0; } } console.log(arr.sort(compare));

輸出結果為 [Object { name="wlz", age=25}, Object { name="zlw", age=24}],可以看到數組已經按照 name屬性進行了排序。我們可以對上面的比較函數再改造一下:

varcompare =function(prop) {returnfunction(obj1, obj2) {varval1 =obj1[prop];varval2 =obj2[prop];if(typeofval1.valueOf == "number" &&typeofval2.valueOf == "number") { val1=val1.valueOf; val2=val2.valueOf; }if(val1 <val2) {return-1; }elseif(val1 >val2) {return1; }else{return0; } } }

如果想按照 age進行排序,arr.sort(compare("age"))即可。

但是對age屬性進行排序時需要注意了,如果age屬性的值是數字,那麼排序會是我們想要的。但很多時候我們從伺服器傳回來的數據中,屬性值通常是字符串。現在我把上面的數組改為:

vararr = [{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"小,即確定排序順序。

現在,我們需要對比較函數再做一些修改:

varcompare =function(prop) {returnfunction(obj1, obj2) {varval1 =obj1[prop];varval2 =obj2[prop];if(!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1=Number(val1); val2=Number(val2); }if(val1 <val2) {return-1; }elseif(val1 >val2) {return1; }else{return0; } } }

在比較函數中,先把比較屬性值轉化為數字 Number(val1)再通過 !isNaN(Number(val1)) 判斷轉化後的值是不是數字(有可能是NaN),轉化後的值如果是數字,則比較轉換後的值,這樣就可以得到我們想要的結果了, 調用 arr.sort(compare("age"))得到:

[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]

可以看到,確實是按正確的方式排序了。

這篇文章所講的都是基礎的,沒什麼技術含量,只是最近項目中遇到了對數組對象進行排序的問題,所以在這裡寫出來分享一下,相信總能幫到一些朋友。

您可能感興趣
免責聲明:本文內容來源于cnblogs,文章觀點不代表壹讀立場,如若侵犯到您的權益,或涉不實謠言,敬請向我們提出檢舉
最新文章 / 服務條款 / 私隱保護 / DMCA / 聯絡我們

壹讀/READ01.COM