如何过滤多维数组中含指定关键词的元素，生成角色页面专属的下拉菜单选项

首先我完全get你的需求：根据当前所在的角色页面动态过滤下拉选项——Ryu页面要隐藏所有Ryu相关变体（基础Ryu、Ken风格、Akuma风格），只显示其他独立角色；而其他角色页面则保留所有Ryu变体，仅隐藏当前页面的角色本身。

先说说你之前代码的问题，这也是过滤无效的核心原因：

• 用roster.filter(x => x !== "Ryu")时，x是数组里的子数组（比如["Ryu","RyuNormal"]），和字符串"Ryu"永远不相等，所以过滤条件永远为true，所有元素都被保留
• roster.filter(x => x !== roster.includes("Ryu"))里，roster.includes("Ryu")是检查整个数组是否有直接的字符串元素"Ryu"，但你的roster元素都是子数组，这个判断永远返回false，最终条件变成x !== false，所有元素依然被保留
• findIndex的问题类似：你拿子数组和字符串"Ryu"比较，永远不匹配，返回-1导致splice根本没执行；就算碰巧找到一个，也只能移除单个条目，没法批量处理Ryu的三个变体

正确的解决方案 #

核心思路是：先明确当前页面的角色标识，再根据角色是否属于Ryu变体组，执行不同的过滤逻辑：

// 原始角色 roster 数组
const roster = [["Ryu","RyuNormal"], ["Ryu as Ken","RyuKen"], ["Ryu as Akuma","RyuAkuma"], ["Chun-Li","ChunLi"],["Zangief"]];

// 假设当前页面的角色名（可根据实际页面动态获取，比如从URL、页面元素提取）
const currentPageChar = "Ryu"; // 可替换为 "Chun-Li" 或 "Zangief"

// 辅助函数：判断某个角色是否属于Ryu变体组
const isRyuVariant = (charName) => charName.includes("Ryu");

// 执行过滤
const filteredRoster = roster.filter(([char]) => {
  // 如果当前页面是Ryu相关的，过滤所有Ryu变体
  if (isRyuVariant(currentPageChar)) {
    return !isRyuVariant(char);
  }
  // 其他页面：只过滤当前页面的角色本身，保留所有Ryu变体和其他角色
  return char !== currentPageChar;
});

// 生成下拉选项的逻辑（和你原来的逻辑一致，改用过滤后的数组）
let options = "";
for ([char, link] of filteredRoster) {
  options += `\n <OPTION class="show" data-toggle="${link ?? char}">${char}</OPTION>`;
}

// 测试结果
console.log(filteredRoster);

验证效果 #

• 当currentPageChar = "Ryu"时，filteredRoster输出：

  [["Chun-Li","ChunLi"],["Zangief"]]
  

  完全符合Ryu页面只显示其他角色的需求。

• 当currentPageChar = "Chun-Li"时，filteredRoster输出：

  [["Ryu","RyuNormal"], ["Ryu as Ken","RyuKen"], ["Ryu as Akuma","RyuAkuma"], ["Zangief"]]
  

  保留了所有Ryu变体和Zangief，隐藏了当前页面的Chun-Li，符合预期。

• 当currentPageChar = "Zangief"时，filteredRoster会保留Ryu变体和Chun-Li，隐藏Zangief，同样满足需求。

可扩展优化 #

如果以后有其他角色也有多变体（比如Ken新增不同风格），可以把分组判断逻辑抽成通用函数，代码可维护性更强：

const isSameGroup = (currentChar, targetChar) => {
  // Ryu组
  if (currentChar.includes("Ryu")) return targetChar.includes("Ryu");
  // 未来新增Ken组的话，直接加判断
  if (currentChar.includes("Ken")) return targetChar.includes("Ken");
  // 其他角色单独成组
  return currentChar === targetChar;
};

// 过滤逻辑简化为：
const filteredRoster = roster.filter(([char]) => !isSameGroup(currentPageChar, char));

新增变体角色时不用修改核心过滤逻辑，只需要扩展isSameGroup函数即可。

备注：内容来源于stack exchange，提问作者Wammy