如何过滤category与header并获取匹配tabs数组项的索引

已知固定入参：

• 分类入参category：示例值为"Western Food"
• 标签头入参header：示例值为"Lamb chops"

待处理的data是结构化对象数组，单个数组项结构：

• 包含category字段，存储分类值
• 包含tabs数组，数组内每个元素是携带header字段的标签对象

需要实现的过滤逻辑：

1. 先从data中筛选出category值和入参完全匹配的分类项
2. 在匹配到的分类项的tabs数组中，定位header值和入参完全匹配的标签条目
3. 返回该条目在tabs数组中的索引值，示例场景下匹配"Lamb chops"的预期输出为1

function getTargetTabIndex(data, categoryVal, headerVal) {
  // 匹配目标分类
  const targetCategoryItem = data.find(item => item.category === categoryVal);
  if (!targetCategoryItem) return -1;
  // 返回对应tab的索引
  return targetCategoryItem.tabs.findIndex(tab => tab.header === headerVal);
}

// 测试样例
const testData = [
  {
    category: "Chinese Food",
    tabs: [{header: "Yuxiang Shredded Pork"}, {header: "Braised Pork"}]
  },
  {
    category: "Western Food",
    tabs: [{header: "Steak"}, {header: "Lamb chops"}, {header: "Cream of Mushroom Soup"}]
  }
];

// 调用测试
console.log(getTargetTabIndex(testData, "Western Food", "Lamb chops")); // 输出结果1，符合预期

• 分类匹配用Array.find方法，遍历到符合条件的项就会终止，比全量过滤的性能更高
• 索引查找直接用原生Array.findIndex方法，不需要手动写循环计数，代码更简洁
• 加了边界兼容：如果没找到对应分类、或者分类下没有对应header的标签，统一返回-1，避免代码抛出异常

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