如何在深度嵌套的 JSON 中查找匹配页面并返回其完整祖先对象-js教程-PHP中文网

本文介绍一种递归搜索方法，用于在多层嵌套的 JSON 结构中定位指定 link 的节点，并返回其所属的最顶层完整对象（如 pages 数组中的某一项），而非仅返回匹配的子节点。

本文介绍一种递归搜索方法，用于在多层嵌套的 json 结构中定位指定 link 的节点，并返回其所属的最顶层完整对象（如 pages 数组中的某一项），而非仅返回匹配的子节点。

在处理具有层级关系的导航菜单、权限路由或内容目录等场景时，常需根据当前页面 URL（如 "sample3a2.html"）反向定位其归属的完整配置项（例如整个 "sample3.html" 对应的页面对象），尤其当该对象携带关键元信息（如 flag: true）时——仅返回匹配的叶子节点是不够的，必须保留其上下文结构。

原始递归函数的问题在于：它在深层匹配后直接返回了当前匹配对象（如 { "link": "sample3a2.html" }），而丢失了父级乃至根级的完整结构。正确做法是：一旦在某个顶层 page 对象的任意嵌套层级中找到目标 link，就立即返回该 page 本身，从而确保返回值包含所有原始字段（flag、child1 等）和完整嵌套结构。

以下是优化后的完整实现：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

function findPageByLink(pages, targetLink) {
  // 内部递归函数：检查 obj 及其所有嵌套子对象是否含 targetLink
  function searchInObject(obj) {
    if (!obj || typeof obj !== 'object') return false;

    // 当前层级匹配
    if (obj.link === targetLink) {
      return true;
    }

    // 递归检查所有属性值（兼容 child1、child2 等任意命名的子数组）
    for (const key in obj) {
      const value = obj[key];
      // 若属性值为数组，遍历每个元素递归检查
      if (Array.isArray(value)) {
        for (const item of value) {
          if (searchInObject(item)) {
            return true;
          }
        }
      }
      // 若属性值为对象，递归检查
      else if (typeof value === 'object') {
        if (searchInObject(value)) {
          return true;
        }
      }
    }
    return false;
  }

  // 遍历顶层 pages 数组，对每个 page 执行搜索
  for (const page of pages) {
    if (searchInObject(page)) {
      return page; // ✅ 关键：返回整个 page 对象，保留全部结构与数据
    }
  }
  return undefined; // 未找到
}

// 使用示例
const pages = [
  { "link": "sample.html", "flag": true, "child1": [] },
  { 
    "link": "sample2.html", 
    "flag": false, 
    "child1": [{ "link": "sample2a.html", "child2": [] }] 
  },
  { 
    "link": "sample3.html", 
    "flag": true, 
    "child1": [
      { 
        "link": "sample3a.html", 
        "child2": [
          { "link": "sample3a1.html" },
          { "link": "sample3a2.html" }, // ← 目标链接
          { "link": "sample3a3.html" }
        ] 
      },
      { 
        "link": "sample3b.html", 
        "child2": [
          { "link": "sample3b1.html" },
          { "link": "sample3b2.html" },
          { "link": "sample3b3.html" }
        ] 
      }
    ] 
  }
];

console.log(findPageByLink(pages, "sample3a2.html"));
// 输出：完整的 sample3.html 对象（含 flag: true 和全部 child1/child2 结构）

✅ 关键改进点说明：

searchInObject() 仅负责布尔判断（是否在当前对象树中存在目标 link），不再返回中间节点；
外层循环在确认某 page 包含目标后，直接返回 page 引用，天然保留其全部嵌套结构；
支持任意深度、任意命名的子数组（如 child1、child2），无需硬编码字段名；
严格区分 null/undefined 和非对象类型，避免运行时错误。

⚠️ 注意事项：

此方案假设 link 值在整个 JSON 中唯一；若存在重复，将返回第一个匹配的顶层对象；
如需支持多层级祖先路径（如返回 ["sample3.html", "sample3a.html", "sample3a2.html"] 路径数组），可扩展 searchInObject 以传递路径栈；
在超大 JSON 场景下，可增加递归深度限制或改用栈模拟迭代，防止栈溢出。

通过这一设计，你不仅能精准定位页面，更能可靠获取其完整的业务上下文，为权限校验、面包屑生成、高亮激活状态等需求提供坚实的数据基础。