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

最近組裏項目需要一個簡單的Table排序的功能,這個功能實現起來很簡單,並且網上也有很多現成的代碼,因此任務很快完成,然而在做跨瀏覽器的測試時在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比較大小的時候如果發現兩個數值相同,則比較其行號,這樣最終只需要在在比較函數中添加兩行代碼即可實現。下面是實現代碼和結果截圖:

更新的Compare方法
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。一個思路,希望對你有所幫助。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章