快捷導(dǎo)航

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

更新時間：2009年12月07日 00:58:34 作者：

最近組里項目需要一個簡單的Table排序的功能，這個功能實現(xiàn)起來很簡單，并且網(wǎng)上也有很多現(xiàn)成的代碼，因此任務(wù)很快完成。

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

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

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

復(fù)制代碼代碼如下:

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) { 
//此處兩值相同，則根據(jù)其行號(初始化時的索引值)進(jìn)行比較。 
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>"); 
} 

更新后結(jié)果截圖：