根据子元素i值查找嵌套JS数组中的父元素

需求说明 #

给定一个支持无限层级嵌套的JS数组，每个元素包含i唯一标识和children子元素数组。需要实现函数findParent(arr, targetId)，功能如下：

• 传入目标元素的i值，返回其父元素的i
• 若目标元素是根节点（无父元素），返回0

原数组示例 #

const arr = [
    {
        i: "tooltip_119",
        children: [
            {
                i: "text_345",
                children: []
            },
            {
                i: "wraper_375",
                children: [
                    {
                        i: "grid_15",
                        children: []
                    }
                ]             
            }
        ]
    },
    {
        i: "chart_123",
        children: []
    },
    {
        i: "graph_467",
        children: []
    },
];

原函数的问题 #

原函数在深层嵌套场景下失效，核心问题是递归调用后错误地尝试访问返回值的.i属性：递归返回的已经是父元素的i字符串或0，并非元素对象，导致读取.i时报错或返回错误结果。

原函数代码：

export function findParent(arr, i) {   // 此函数在深层嵌套时存在bug
  for (let j = 0; j < arr.length; j++) {
    const element = arr[j];
    if (element.children && element.children.length > 0) {
      const childElement = element.children.find((e) => e.i === i);
      if (childElement) {
        return element.i;
      } else {
        const parentElement = findParent(element.children, i);
        if (parentElement) {
          return parentElement.i;
        }
      }
    }
  }
  return 0;
}

修复后的函数 #

export function findParent(arr, targetId) {
  for (const element of arr) {
    // 检查当前元素的子元素是否包含目标
    const hasTarget = element.children.some(child => child.i === targetId);
    if (hasTarget) {
      return element.i;
    }
    // 递归遍历子元素，查找目标的父元素
    const parentResult = findParent(element.children, targetId);
    if (parentResult !== 0) {
      return parentResult;
    }
  }
  // 遍历完所有元素都没找到，返回0（目标是根节点或不存在）
  return 0;
}

修复要点 #

1. 递归调用后直接返回结果，不再错误读取.i属性
2. 使用for...of循环简化遍历逻辑
3. 用some替代find，仅需判断是否存在目标元素，无需返回整个对象，性能更优
4. 移除不必要的children长度判断，即使子数组为空也不影响逻辑

测试验证 #

运行以下测试用例，结果符合预期：

console.log(findParent(arr, "tooltip_119"));  // 0
console.log(findParent(arr, "chart_123"));    // 0
console.log(findParent(arr, "graph_467"));    // 0
console.log(findParent(arr, "text_345"));     // "tooltip_119"
console.log(findParent(arr, "wraper_375"));   // "tooltip_119"
console.log(findParent(arr, "grid_15"));      // "wraper_375"

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