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

然而在做跨瀏覽器的測試時在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>");
}

更新後結果：

當然這隻是解決方案之一，我的目的只是盡量減少我們需要維護的代碼量，這樣可以盡量減少bug。一個思路，希望對你有所協助。

挫折就像一面牆，這面牆迫使我們向自己證明，我們是多麼渴望得到這面牆後面的寶藏