JavaScript Array.sort() 跨浏览器稳定性问题与解决方案

跨浏览器排序稳定性问题

在进行跨浏览器测试时，发现Chrome浏览器存在一个排序问题。测试结果显示，当依据某一列进行排序且两行数值相同时，Chrome并未保持原有顺序，而是交换了这两行的位置。经查阅资料得知，ECMAScript规范未规定具体的sort算法，各浏览器实现不同。Chrome和Firefox 3.0之前的版本使用不稳定排序算法，而IE使用稳定排序算法。这种算法实现的差异导致图表在不同浏览器下显示结果不一致。

图1：数组左侧数字表示初始化时的顺序

基于Index的稳定排序解决方案

针对此问题，我和团队成员分别提出了解决方案。同事建议自行实现具体的排序算法以统一控制，鉴于网上现成的排序算法众多且排序是程序员基础技能，实现并不复杂，主要工作在于代码编写。但我认为有更简便的方法：由于数据基于XSLT从XML解析而来，XSLT已知每行数据的序号（若由服务器端代码从数据库或Web服务读取，同样容易获取该值）。因此，建议在XSLT中为每列添加Index属性，例如第一行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概率。此思路供参考。