Vue.js如何按surname、name两个属性对对象数组排序？

嘿，我懂你碰到的麻烦了！你当前的代码里连续调用了两次sort——先按surname排序，紧接着又按name重新排序，这就导致第一次的排序结果被完全覆盖，最终只有第二次的name排序生效了，这可不是你想要的效果。

正确的做法是在同一个排序函数里完成两级排序逻辑：先比较surname，当两个对象的surname相等时，再去比较name。这样就能实现先按姓氏排序、姓氏相同则按名字排序的需求了。

修改后的代码示例 #

computed: {
  sortedArray: function() {
    // 先复制原数组，避免sort原地修改原users数组（Vue中尽量不要直接修改源数据）
    return [...this.users].sort((a, b) => {
      // 第一优先级：比较surname
      if (a.surname < b.surname) return -1;
      if (a.surname > b.surname) return 1;
      // 如果surname相等，再比较name
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });
  }
}

更简洁的写法（利用localeCompare） #

如果你想让代码更简洁，还能使用String.prototype.localeCompare方法，它不仅能简化比较逻辑，还能更好地处理带重音的字符或不同语言的排序规则：

computed: {
  sortedArray: function() {
    return [...this.users].sort((a, b) => {
      // 先比较姓氏，结果不为0（即不相等）则直接返回该结果
      const surnameDiff = a.surname.localeCompare(b.surname);
      // 姓氏相等时，再比较名字
      return surnameDiff !== 0 ? surnameDiff : a.name.localeCompare(b.name);
    });
  }
}

关键注意点 #

• 为什么要复制数组？因为Array.sort()是原地排序，会直接修改原数组。在Vue的computed属性中，我们应该避免修改源数据，所以用扩展运算符[...this.users]或者this.users.slice()来创建原数组的副本再排序。

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