如何在JavaScript层级对象结构中获取父对象并实现层级过滤？

你不需要必须给每个元素加id和parentId，有两种可行的解决思路：

一、不修改原结构，遍历动态记录路径 #

直接通过递归遍历整个层级树，遍历过程中把当前节点的路径存起来，找到匹配的节点后直接用记录的路径生成展示文本就行，完全不用改原始数据。

示例代码 #

const data = {
    name: "General",
    icon: "general",
    children: [
      {
        name: "Line 1",
        icon: "line",
        children: [
          {
            name: "Area 1",
            icon: "area",
            children: [
              { name: "Y", icon: "x" },
              { name: "Z", icon: "z" },
            ],
          },
          { name: "Area 2", icon: "line" },
        ],
      },
      {
        name: "Line 2",
        icon: "line",
        children: [{ name: "Area 3", icon: "area" }],
      },
    ],
};

// 递归查找节点并记录路径
function findNodeWithPath(node, searchKeyword, currentPath = []) {
    const updatedPath = [...currentPath, node.name];
    // 匹配到目标节点，返回节点和路径
    if (node.name.includes(searchKeyword)) {
        return { node, path: updatedPath };
    }
    // 遍历子节点继续查找
    if (node.children?.length) {
        for (const child of node.children) {
            const result = findNodeWithPath(child, searchKeyword, updatedPath);
            if (result) return result;
        }
    }
    return null;
}

// 测试搜索"Area 1"
const result = findNodeWithPath(data, "Area 1");
if (result) {
    // 生成展示文本：节点名 | 上级路径（去掉自身）
    const displayStr = `${result.node.name} | ${result.path.slice(0, -1).join(" -> ")}`;
    console.log(displayStr); // 输出：Area 1 | General -> Line 1
}

这种方式适合只需要做单次搜索展示的场景，代码轻量，不用动原始数据结构。

二、修改原结构，添加父关联信息 #

如果后续需要频繁查询父节点或者做更多父子相关的操作，可以提前给每个节点加parent引用或者parentId，这样后续查路径会更高效。

示例代码（添加父引用） #

// 给所有节点添加parent引用
function attachParentRefs(node, parent = null) {
    node.parent = parent;
    if (node.children?.length) {
        node.children.forEach(child => attachParentRefs(child, node));
    }
}

// 先初始化父引用
attachParentRefs(data);

// 查找目标节点
function findTargetNode(node, searchKeyword) {
    if (node.name.includes(searchKeyword)) return node;
    if (node.children?.length) {
        for (const child of node.children) {
            const res = findTargetNode(child, searchKeyword);
            if (res) return res;
        }
    }
    return null;
}

// 从目标节点往上回溯获取完整路径
function getFullPath(node) {
    const path = [];
    let current = node;
    while (current) {
        path.unshift(current.name);
        current = current.parent;
    }
    return path;
}

// 测试搜索
const target = findTargetNode(data, "Area 1");
if (target) {
    const path = getFullPath(target);
    const displayStr = `${target.name} | ${path.slice(0, -1).join(" -> ")}`;
    console.log(displayStr); // 输出：Area 1 | General -> Line 1
}

这种方式适合有多次父子操作需求的场景，提前做一次初始化，后续查询会更快。

总结 #

• 只是临时做搜索路径展示：选第一种方案，不用改原数据，省事。
• 有频繁父子关系操作：选第二种方案，提前加关联信息，提升后续操作效率。

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