如何修复计算属性中对象数组按名称字母排序不生效问题

• 原生JavaScript字符串使用</>比较是基于Unicode码点计算的，默认大小写敏感，大写字母的码点整体小于小写字母，会出现Zoo排在apple前面的不符合预期的情况，也无法正确处理带重音的字符、多语言内容的排序。
• 未对name字段做兜底处理，如果部分数据没有name属性会导致排序逻辑异常。
• Array.sort()是原地排序方法，会直接修改调用它的数组，即使此处filter返回的是新数组，排序前拷贝数组可以避免潜在的副作用。

替换原有排序逻辑，使用字符串内置的localeCompare()方法实现符合自然语言规则的排序，修复后的完整代码如下：

computed: { 
  availableSystems() {
    // 过滤符合条件的系统数据
    const filteredSystems = this.systems.filter((sys) => sys && !sys?.active && sys?.enabled) || [];
    // 拷贝数组后排序，避免原地修改产生的副作用，使用localeCompare实现正确的字母排序
    return [...filteredSystems].sort((a, b) => {
      // 兜底空字符串，避免无name字段的情况报错
      const nameA = a.name ?? ''
      const nameB = b.name ?? ''
      // 配置sensitivity: 'base'实现大小写不敏感排序，中文场景可将第二个参数改为'zh-CN'
      return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' })
    });
  }
}

• 如果需要区分大小写排序，删除localeCompare的第三个参数即可。
• 如果排序内容以中文为主，将第二个参数改为'zh-CN'可以实现按拼音顺序排序的效果。
• 如果需要支持多语言混合排序，可以传入语言数组比如['zh-CN', 'en-US']适配不同语言的排序规则。

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