快捷導(dǎo)航

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

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

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

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

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

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