javascript Array.sort() 跨瀏覽器下需要考慮的問題

2019-11-21 00:55:55

字體：大中小

來源：轉載

供稿：網友

然而在做跨瀏覽器的測試時在chrome瀏覽器下發現了一個問題，測試人員發現(見圖1)，在chrome下依據某列排序時，如果兩行的排序數值相同，chrome不是按通常情況保持這兩列的順序不變，而是將他們順序調換。在google一下問題之后，我們發現原來是當初ECMAscript規范中并未規定具體的sort算法，所以導致各個瀏覽器都有自己的sort算法，然而由于有些廠商是基于不穩定的排序算法實現的，如chrome和Mozilla/Firefox 3.0以前的排序算法都是不穩定的，不過IE是穩定的排序算法。這種算法實現的差異也導致了圖表在不同瀏覽器下顯示的結果不一致。

圖1：數組左邊的數字表示它初始化時候的順序

思考了一下，我和組里另外一個成員分別給出了自己的解決方法，他的意見是通過自己實現具體的sort算法來統一控制，鑒于網上的現成的排序算法很多并且排序算法是程序員的基礎，這種方式實現起來并不復雜，唯一的工作就是代碼的實現。不過我認為其實有更簡單的方法，因為我們的數據是基于XSLT從xml中解析出來的，而XSLT是知道每行數據的的序號的(當然如果是由服務器端代碼從數據庫或webservice讀取一樣很容易取該值)，所以我認為可以在XSLT中給每列添加一個Index屬性，e.g.第一行Index=1,第二行Index=2...這樣在sort比較大小的時候如果發現兩個數值相同，則比較其行號，這樣最終只需要在在比較函數中添加兩行代碼即可實現。下面是實現代碼和結果截圖：

復制代碼代碼如下:

var array = [ 
{Index:1,val:25}, 
{Index:2,val:25}, 
{Index:3,val:45}, 
{Index:4,val:78}]; 
array.sort(function(a, b) { 
if (a.val === b.val) { 
//此處兩值相同，則根據其行號(初始化時的索引值)進行比較。 
return a.Index - b.Index; 
} 
return a.val - b.val; 
}) 
for (var i = 0; i < array.length; i++) { 
document.write("<p>" + array[i].Index + ":" + array[i].val + "</p>"); 
} 

更新后結果截圖：