如何使用JavaScript对API返回的分类结果按字母排序？

原代码的核心问题是将分类名和ID分别存入两个数组，去重后仅靠索引关联，排序时会导致分类名与ID对应关系错乱，同时数字字符串ID直接用sort()会出现字典序排序错误（比如"11"排在"2"前）。下面是优化后的解决方案：

步骤1：重构数据结构，配对分类名与ID #

不再分开存储两个数组，而是将每个分类的name和id封装成对象，确保后续去重、排序时两者关联不丢失：

const generateFilterOptions = () => {
  $.ajax({
    method: 'GET',
    url: baseURL,
  }).done(function (data, status, xhr) {
    // 收集所有分类对象，处理逗号分隔的多分类场景
    let allCategories = [];
    $.each(data, function (index, value) {
      // 拆分可能的多分类（比如"分类A,分类B"）
      const names = value.field_resource_category.split(',').map(el => el.trim());
      const ids = value.field_resource_category_id.split(',').map(el => el.trim());
      // 配对每个分类的name和id
      names.forEach((name, idx) => {
        allCategories.push({
          name: name,
          id: ids[idx]
        });
      });
    });

步骤2：对分类对象数组去重 #

利用Map根据分类ID去重（ID为唯一标识），自动覆盖重复项，保留每个ID对应的唯一分类：

// 按ID去重，得到唯一分类数组
    const uniqueCategories = [...new Map(allCategories.map(item => [item.id, item])).values()];

步骤3：按需求排序 #

需求1：按分类名的字母顺序排序 #

使用localeCompare()确保中英文都能正确按字母排序：

// 按分类名字母顺序排序
    uniqueCategories.sort((a, b) => a.name.localeCompare(b.name));

需求2：按分类ID的数字顺序排序（解决"11"排在"2"前的问题） #

将ID字符串转为整数后比较，实现数字大小排序：

// 按分类ID的数字大小排序
    uniqueCategories.sort((a, b) => parseInt(a.id, 10) - parseInt(b.id, 10));

步骤4：生成筛选复选框 #

遍历排序后的唯一分类数组，生成DOM元素（先清空容器避免重复添加）：

// 生成筛选复选框
    const $categoryFilter = $("#categoryFilter");
    $categoryFilter.empty();
    uniqueCategories.forEach(item => {
      $categoryFilter.append(`
        <div class="d-flex align-items-start">
          <input type="checkbox" name="${item.name}" value="${item.id}" id="cat-${item.id}">
          <label class="fs-6" for="cat-${item.id}">${item.name}</label>
        </div>
      `);
    });
  });
};

关键优化点 #

• 用对象数组关联分类名与ID，彻底避免索引错位问题
• 基于Map的去重方式更稳定，确保每个ID对应唯一分类
• 排序逻辑灵活切换，同时支持字母排序和数字ID排序
• 添加empty()清空容器，防止重复请求时生成重复复选框

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