多级菜单导航抽屉搜索问题：搜索返回全类别匹配项

当前搜索函数会返回包含匹配关键词的整个类别下所有项目，现有递归实现可简化，以下是两种更简便的实现方案：

方案一：针对已知字段优化（推荐） #

如果明确数据结构中标题字段为title、子项字段为children，可以直接针对性处理，避免遍历所有对象键：

computedItemsList() {
  const searchStr = this.search.toLowerCase();
  // 递归检查单个项目是否匹配
  const hasMatch = (item) => {
    // 检查当前项目标题是否匹配
    if (item.title?.toLowerCase().includes(searchStr)) return true;
    // 递归检查子项目
    return item.children?.some(hasMatch) ?? false;
  };
  return this.menu_items_list.filter(hasMatch);
}

优势 #

• 逻辑更直观，直接对应数据结构中的字段，可读性更强
• 减少不必要的键遍历，性能更优

方案二：通用型优化 #

如果数据结构不固定，需要兼容任意字段名的字符串和子对象，可简化遍历逻辑：

computedItemsList() {
  const searchStr = this.search.toLowerCase();
  const hasMatch = (obj) => {
    for (const val of Object.values(obj)) {
      // 匹配字符串类型的字段
      if (typeof val === 'string' && val.toLowerCase().includes(searchStr)) return true;
      // 递归检查子对象
      if (typeof val === 'object' && val !== null && hasMatch(val)) return true;
    }
    return false;
  };
  return this.menu_items_list.filter(hasMatch);
}

优势 #

• 保持通用性，无需依赖固定字段名
• 用Object.values直接遍历值，简化了原代码中对键的判断逻辑

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