Chrome下Array.sort的compareFunction如何保持数组原序？

我懂你遇到的这个坑了——同样是用返回0的compareFunction调用sort，Firefox里不管数组多长都能保持原顺序，但Chrome里元素超过10个就乱了。这事儿的根源在于不同浏览器的排序算法实现差异：

Chrome的V8引擎对sort做了优化：当数组长度≤10时，用的是稳定的插入排序；一旦长度超过10，就切换成不稳定的快速排序。当你的compareFunction返回0时，不稳定排序会随意调整那些被判定为“相等”的元素位置，而稳定排序则会严格保留它们的原始顺序。

既然你的数组已经是排好序的，根本不需要实际排序操作，这里给你两种解决方案：

方案1：直接跳过sort调用（最推荐） #

如果能确定数组本身已经有序，那完全没必要调用sort，直接用原数组就好——这是最高效也最省心的方式，完全避开浏览器差异问题。

方案2：必须调用sort时，强制稳定排序 #

如果因为某些限制（比如框架要求必须走sort流程）不得不调用sort，那可以通过绑定原始索引的方式，强制让排序逻辑保持原顺序：

方式A：给元素添加原始索引属性 #

function compareFunction(direction, a, b) {
    // 你的原有业务逻辑，这里返回0表示无需调整顺序
    const compareResult = 0;
    if (compareResult !== 0) {
        return direction === 'asc' ? compareResult : -compareResult;
    }
    // 当元素被判定为"相等"时，通过原始索引保持原顺序
    return a._originalIndex - b._originalIndex;
}

// 先给数组每个元素绑定原始索引
var array2 = [1,2,3,4,5,6,7,8,'x',10,11].map((item, index) => ({
    value: item,
    _originalIndex: index
}));

// 排序后提取出原值
array2.sort((a, b) => compareFunction.call(null, 'asc', a, b));
const result = array2.map(item => item.value);
console.log(result.toString()); // 输出：1,2,3,4,5,6,7,8,x,10,11

方式B：用辅助索引数组（不修改原元素结构） #

如果你不想给原元素添加额外属性，可以用一个单独的索引数组来控制排序：

var array2 = [1,2,3,4,5,6,7,8,'x',10,11];
// 创建存储原始索引的数组
const indices = array2.map((_, idx) => idx);

// 对索引数组排序：先按你的业务逻辑比较，相等则按原索引排序
indices.sort((i, j) => {
    const compareResult = compareFunction.call(null, 'asc', array2[i], array2[j]);
    return compareResult !== 0 ? compareResult : i - j;
});

// 根据排序后的索引重新构建数组
const sortedArray = indices.map(idx => array2[idx]);
console.log(sortedArray.toString()); // 保持原顺序不变

简单总结一下：ECMAScript标准并没有要求Array.sort()必须是稳定排序，所以不同浏览器的实现会有差异。Chrome的这种“阈值切换算法”就是导致你问题的原因，通过绑定原始索引的方式，就能强制让排序逻辑保持元素的原始顺序啦。

内容的提问来源于stack exchange，提问作者Olezt