如何在嵌套对象数组中深度查找匹配的 slug 属性-js教程-PHP中文网

如何在嵌套对象数组中深度查找匹配的 slug 属性

本文详解如何使用递归函数在任意深度的树形结构（如侧边栏菜单）中查找指定 slug 值，提供 deepSome（布尔判断）和 deepFind（返回匹配项）两种实用方案，并修正原始代码中的类型混淆与递归逻辑错误。

本文详解如何使用递归函数在任意深度的树形结构（如侧边栏菜单）中查找指定 slug 值，提供 `deepsome`（布尔判断）和 `deepfind`（返回匹配项）两种实用方案，并修正原始代码中的类型混淆与递归逻辑错误。

在处理具有嵌套 children 属性的树状数据（例如前端导航菜单、权限路由或组织架构）时，常需判断某个深层节点是否包含特定属性值（如 slug === 'sub1-2-2'）。原始实现失败的核心原因在于：未统一处理单个对象与对象数组的输入类型差异，且递归分支逻辑错位——当首次传入 sidebar（对象）时，group.children 是数组，但递归调用 deepFind(group.children, ...) 后，下一层 group 变为数组，却仍尝试访问 group.children（undefined），导致 some() 调用报错或逻辑中断。

正确做法是：始终将当前遍历单元标准化为数组，再统一进行 find/some 操作。以下是两个生产就绪的解决方案：

✅ 方案一：`deepSome` —— 判断是否存在匹配项（推荐用于条件检查）

function deepSome(group, location) {
  // 统一转为数组，兼容单对象或数组输入
  if (!Array.isArray(group)) group = [group];

  const matchesSlug = (item) => item.slug === location;

  return group.some(item => 
    // 若有 children，则递归搜索；否则直接比对 slug
    item.children ? deepSome(item.children, location) : matchesSlug(item)
  );
}

// 使用示例
console.log(deepSome(sidebar, 'sub1-2-2')); // true
console.log(deepSome(sidebar, 'nonexistent')); // false

✅ 方案二：`deepFind` —— 返回首个匹配的完整对象

function deepFind(group, location) {
  if (!Array.isArray(group)) group = [group];

  const matchesSlug = (item) => item.slug === location;

  for (const item of group) {
    if (matchesSlug(item)) return item;
    if (item.children && Array.isArray(item.children)) {
      const found = deepFind(item.children, location);
      if (found) return found;
    }
  }
  return undefined;
}

// 使用示例
console.log(deepFind(sidebar, 'sub1-2-2'));
// → { label: 'sub1-2-2', slug: 'sub1-2-2' }

? 关键改进说明：

类型守卫：首行 if (!Array.isArray(group)) group = [group] 消除输入歧义，使函数既可传入根对象（如 sidebar），也可传入 children 数组；

清晰分支：明确区分“当前项匹配”与“递归子树匹配”两种路径，避免 some() 的短路特性掩盖深层结果；

安全访问：检查 item.children && Array.isArray(item.children) 再递归，防止 null/undefined 或非数组值引发错误；

无副作用：不依赖闭包变量或外部 target 对象，函数纯净、可测试、易复用。