如何在过滤后按字母顺序排列字符串数组？

Question

在我的 VUE 应用程序中，我正在查看一个数组，该数组具有以下结构

[
{
  "id": 1,
  "brands": [
    {
      "name": "Mall",
      "id": 1
    },
    {
      "name": "Tanted",
      "id": 25
    },
    {
      "name": "Anteil",
      "id": 12
    },
    {
      "name": "Moscard",
      "id": 73
    }
  ]
},
{
  "id": 2,
  "brands": [
    {
      "name": "Yanre",
      "id": 6
    },
    {
      "name": "Alted",
      "id": 10
    },
    {
      "name": "Sillex",
      "id": 9
    },
    {
      "name": "Straf",
      "id": 78
    }
  ]
}
]

我要做的第一件事是显示选择的不同选项，我在其中显示它们是按 id 过滤

computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands;
    }
}

              <select
              v-model="businessInfo.selectedBrand"
              @change="onChangeBrand($event)">
              <option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
              </select>

到目前为止，我设法在选择中显示与每个 id 相对应的品牌，但我也想按字母顺序对它们进行排序，但我找不到将过滤器与排序相结合的方法。 我试图连接这些方法，但它返回一个语法错误。

computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands.sort(function(a, b) {
      return a.name === b.name ? 0 : +(a.name > b.name) || -1;
    });
    }
}

我该怎么做？ 提前感谢大家的时间和帮助

Answer 1

要按升序 (A-Z) 按字典顺序（松散地、按字母顺序）比较两个字符串，您可以在 sort 回调中执行此操作：

return a.name.localeCompare(b.name);

对于降序（Z-A），使用

return b.name.localeCompare(a.name);

---

旁注：任何时候你发现自己在写array.filter(/*...*/)[0]，改写array.find(/*...*/)。 （如果您需要 IE 支持，则使用 Polyfilling find。）find 方法在找到第一个匹配条目并返回该条目时停止，而不是遍历整个数组，从所有数组中构建一个新数组匹配条目。如果您只是要获取第一个条目，则无需遍历整个数组并构建一个新数组。 :-)

所以结合上面的主要答案：

  return !this.$store.getters.brands
    ? null
    : this.$store.getters.brands.find(
        item => item.id == selectedBrand
      ).brands.sort((a, b) => a.name.localeCompare(b.name));