Chrome与Safari中JavaScript .sort()方法表现差异问题求助

嘿，这个跨浏览器排序差异的问题我之前也遇到过，本质是JavaScript的sort()方法在不同浏览器中的默认行为细节差异导致的！

问题出在哪？ #

当你不给Array.prototype.sort()传入自定义比较函数时，它会把所有元素转为字符串，然后按照UTF-16的码点值来排序。更重要的是，不同浏览器的排序实现可能不一样——比如Chrome用的是稳定排序算法，而Safari的排序逻辑可能是不稳定的，或者对某些字符串的排序处理有细微差别，这就导致了相同的数组在两个浏览器里跑出不同的结果。

而且从你期望的排序结果来看，你需要的是自定义的分组排序（Funny Pig组在前，接着Angry Lion，最后Little Rabbit），这完全不是默认字符串排序能做到的（默认排序里"Angry"的首字母A码点比F小，会排在Funny Pig前面），所以必须写明确的比较函数来指定排序规则。

解决方案：写自定义比较函数 #

要保证跨浏览器排序结果完全一致，你必须告诉sort()怎么比较两个元素。针对你的需求，我们可以拆分出每个元素的动物名称和数字部分，先按你想要的分组顺序排序，再按数字大小排序：

function sortAnimalList(a, b) {
  // 用正则拆分出动物名称和数字（比如"Funny Pig 1"拆成["Funny Pig", "1"]）
  const [animalA, numStrA] = a.split(/ (\d+)$/);
  const [animalB, numStrB] = b.split(/ (\d+)$/);
  
  // 定义你需要的分组优先级顺序
  const groupPriority = {
    "Funny Pig": 0,
    "Angry Lion": 1,
    "Little Rabbit": 2
  };
  
  // 先比较分组优先级
  if (groupPriority[animalA] !== groupPriority[animalB]) {
    return groupPriority[animalA] - groupPriority[animalB];
  }
  
  // 同一组的话，按数字从小到大排序（转成整数比较，避免字符串排序的坑，比如"10"排在"2"前面）
  return parseInt(numStrA, 10) - parseInt(numStrB, 10);
}

// 调用排序：
yourArray.sort(sortAnimalList);

如果你的分组顺序其实是按自然语言的字母顺序（只是之前的描述可能搞反了？），可以把优先级部分换成localeCompare，它能保证跨浏览器的字符串排序一致性：

function sortAnimalList(a, b) {
  const [animalA, numStrA] = a.split(/ (\d+)$/);
  const [animalB, numStrB] = b.split(/ (\d+)$/);
  
  // 按自然语言顺序比较动物名称
  const nameComparison = animalA.localeCompare(animalB);
  if (nameComparison !== 0) {
    return nameComparison;
  }
  
  // 同一组按数字排序
  return parseInt(numStrA, 10) - parseInt(numStrB, 10);
}

重要提醒 #

永远不要依赖sort()的默认行为来处理非简单排序的需求——默认排序只适合纯字符串/数字的基础排序，而且跨浏览器的一致性无法保证。只要你有自定义的排序逻辑（比如分组、数字排序），一定要写明确的比较函数。

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