轉載需注明出處。

如有錯誤歡迎指正,。

引子

有個需求需要前端對數(shù)據(jù)進行排序,。

DEMO中只對第三列的數(shù)據(jù)進行排序。

類似下圖：

Dom結構如下圖

用[].sort()來call一下,。

排序方法代碼如下圖（注意標紅的地方,，用的是Arr的sort方法）：

我們看下排序效果（chrome ff 撒發(fā)日 ie6-11都是這個效果）

但是 ，

當參與排序的item數(shù)量超過10的時候,，奇怪的地方出現(xiàn)了,。

/**

* 當item數(shù)量超過10個的時候

* chrome 的排序不能說是排錯了。因為我們是對分數(shù)進行排序,，單看分數(shù)這一列完全沒有錯誤,。

* 但是如果我們對應著ID 一起看的話 發(fā)現(xiàn)chrome比較坑爹，

* 當分數(shù)相同的時候 chrome會對兩個item亂排,，而且似乎毫無規(guī)律,。

*/

廢話不說，看下圖,。

第一張圖谷爹的chrome             第二張是FF和撒發(fā)日測的

問題排查

為什么chrome好像有些不正常呢,？

其實問題是出在 v8 在對 Array.prototype.sort這個方法的實現(xiàn)上做了一些優(yōu)化，

v8,Array.js

傳送門  https://code.google.com/p/v8/source/browse/trunk/src/array.js （有興趣的可以去看下,需要梯子）

代碼中做過判斷， 數(shù)量小于或等于10的時候 走的是插入排序（InsertionSort）,；否則快速排序（QuickSort）

對排序算法如果有了解的應該知道 InsertionSort是穩(wěn)定的排序算法,，QuickSort則是不穩(wěn)定的算法 。

對于排序算法穩(wěn)定性本文不做闡述,，不了解的朋友可以自行搜索,。

伸手黨見下圖：

解決問題

既然瀏覽器對Array.prototype.sort的實現(xiàn)不一樣，解決這個問題只要自己寫一個排序算法就行了,，是要追求效率還是穩(wěn)定性自己可以根據(jù)業(yè)務需求控制,。

帖一個穩(wěn)定排序算法-插入排序（insertSort）的代碼,。

這里是直接掛在 Array.prototype上面,。

再來看下效果

END

本文作者：This 轉載請注明來自： 攜程設計委員會