如何用Vanilla JS按指定字符串数组顺序过滤并排序表格

首先你给出的示例代码存在语法错误，{"COMMON", ...}这种写法不符合JS语法规范，我们需要用权重映射对象来定义每个稀有度的排序优先级，这样排序时能快速获取对应优先级数值。

步骤1：定义排序权重映射 #

把每个稀有度对应一个数字，数字越小，排序越靠前（匹配你要的 Common > Uncommon > Rare > Epic > Legendary 顺序）：

// 自定义稀有度排序权重，数字越小优先级越高
const rarityOrder = {
  "COMMON": 0,
  "UNCOMMON": 1,
  "RARE": 2,
  "EPIC": 3,
  "LEGENDARY": 4
};

步骤2：编写通用排序函数 #

这个函数接收三个参数：要排序的数据数组、用来比较的字段键（比如你的数据里存稀有度的字段叫rarity）、权重映射对象。利用数组的sort()方法，通过对比两个元素的权重值来排序：

function sortByCustomOrder(dataArray, fieldKey, orderMap) {
  // 复制原数组避免修改原始数据
  return [...dataArray].sort((a, b) => {
    // 获取两个元素对应字段的权重，未知稀有度默认排到最后
    const weightA = orderMap[a[fieldKey]] ?? Infinity;
    const weightB = orderMap[b[fieldKey]] ?? Infinity;
    return weightA - weightB;
  });
}

步骤3：排序并重新渲染表格 #

假设你的表格数据是这样的数组：

// 示例表格数据
let tableData = [
  { name: "新手剑", rarity: "COMMON" },
  { name: "魔龙铠甲", rarity: "LEGENDARY" },
  { name: "迅捷靴", rarity: "UNCOMMON" },
  { name: "破甲弓", rarity: "RARE" },
  { name: "魔法披风", rarity: "EPIC" }
];

调用排序函数得到排序后的数据，再重新渲染表格：

// 按稀有度字段排序
const sortedData = sortByCustomOrder(tableData, "rarity", rarityOrder);

// 渲染表格的示例函数（根据你实际的表格结构调整）
function renderTable(data) {
  const tableBody = document.querySelector("#item-table tbody");
  tableBody.innerHTML = ""; // 清空原有内容
  data.forEach(item => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${item.name}</td>
      <td>${item.rarity}</td>
    `;
    tableBody.appendChild(row);
  });
}

// 执行渲染
renderTable(sortedData);

补充说明 #

• 如果你的表格数据是从API获取的，直接把API返回的数组传入sortByCustomOrder函数即可。
• 若遇到不在权重映射里的稀有度，代码里用?? Infinity让它自动排到最后，你也可以根据需求调整这个默认规则。

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