如何遍历未知嵌套深度的JSON对象，实现笔记应用目录展示与定位

1. 未知深度嵌套结构的遍历方案 #

直接用递归函数实现即可，把单层级渲染逻辑封装成可复用函数，遇到文件夹条目时，创建子列表容器后递归调用渲染函数处理子条目，自动适配任意嵌套深度：

// 递归渲染条目
function renderEntries(entries, parentNode) {
  for (const entry of entries) {
    const item = document.createElement("li");
    item.textContent = entry.name;

    if (entry.children) {
      // 处理文件夹
      item.className = "folder";
      const childList = document.createElement("ul");
      // 递归渲染子级
      renderEntries(entry.children, childList);
      item.appendChild(childList);
      // 可选：添加点击展开/收起逻辑
      item.addEventListener("click", (e) => {
        e.stopPropagation();
        childList.classList.toggle("hidden");
      });
    } else {
      // 处理笔记文件
      item.className = "file";
      // 可选：存储笔记内容到DOM节点便于后续读取
      item.dataset.noteContent = entry.content;
    }

    parentNode.appendChild(item);
  }
}

// 初始调用渲染根目录
const rootContainer = document.querySelector("#note-root");
renderEntries(data.entries, rootContainer);

2. 文件夹/笔记定位方案 #

优先选择添加全局唯一ID #

强烈建议给每个条目（包括文件夹和笔记）新增一个全局唯一的id字段，渲染时将ID存储到对应DOM节点的dataset属性中，这是最高效、最不容易出错的定位方式：

• 查找条目时只需要写一个简单的递归查找函数，不管嵌套多少层都能快速定位到目标
• 完全不用担心重名、路径变动导致的定位失效问题
• 后续做笔记增删改操作时，用ID做匹配也会大幅降低逻辑复杂度

查找函数示例：

function getEntryById(entries, targetId) {
  for (const entry of entries) {
    if (entry.id === targetId) return entry;
    if (entry.children) {
      const matched = getEntryById(entry.children, targetId);
      if (matched) return matched;
    }
  }
  return null;
}

深度信息的作用 #

深度信息只需要在做层级UI样式（比如不同层级的缩进、不同的图标样式）时才需要存储，普通的渲染和定位场景完全不需要额外维护深度信息，递归过程会自动处理层级嵌套关系。

如果确实需要用到深度，可以在递归函数里加一个深度参数，每次递归调用时+1即可：

function renderEntries(entries, parentNode, depth = 0) {
  // 其他逻辑不变，depth就是当前条目的层级
  item.style.paddingLeft = `${depth * 12}px`;
  // 递归调用时深度+1
  renderEntries(entry.children, childList, depth + 1);
}

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