如何在JavaScript中深度查找嵌套对象的children属性匹配项

你遇到的核心问题就是没统一处理children的两种类型（数组/对象），导致部分节点没被遍历到，所以始终返回false。下面直接给你修正后的实现思路和代码：

核心处理逻辑 #

1. 优先检查当前节点的slug是否匹配目标值，匹配则直接返回true
2. 针对children的不同类型做分支处理：
   • 无children则返回false
   • 若children是数组，遍历每个子节点递归查找，找到匹配立即返回true
   • 若children是对象（排除null），直接递归这个子对象

代码示例 #

先模拟包含两种children类型的侧边栏结构：

const sidebar = {
  slug: 'main',
  children: [
    {
      slug: 'sub1',
      children: {
        slug: 'sub1-1',
        children: {
          slug: 'sub1-2',
          children: {
            slug: 'sub1-2-2' // 目标slug
          }
        }
      }
    },
    {
      slug: 'sub2',
      children: [
        { slug: 'sub2-1' },
        { slug: 'sub2-2' }
      ]
    }
  ]
};

修正后的递归查找函数：

function hasTargetSlug(node, targetSlug) {
  // 检查当前节点的slug
  if (node.slug === targetSlug) {
    return true;
  }

  // 无children直接返回false
  if (!node.children) {
    return false;
  }

  // 处理数组类型的children
  if (Array.isArray(node.children)) {
    for (const child of node.children) {
      if (hasTargetSlug(child, targetSlug)) {
        return true;
      }
    }
  } 
  // 处理对象类型的children（排除null）
  else if (typeof node.children === 'object' && node.children !== null) {
    return hasTargetSlug(node.children, targetSlug);
  }

  // 所有子节点都未匹配
  return false;
}

// 测试调用
console.log(hasTargetSlug(sidebar, 'sub1-2-2')); // 输出true

关键细节说明 #

• 用Array.isArray精准判断数组类型，避免把对象误判为数组
• 加node.children !== null的判断，因为typeof null会返回object，防止递归传入null报错
• 数组遍历中一旦找到匹配就立即返回，不用遍历全部子节点，提升效率

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