本文介绍一种高效、可复用的方法，通过递归或迭代遍历 javascript 树形数组，根据子节点的唯一标识（如 `i` 字段）反向定位其直接父节点，并获取父节点的 `i` 值。适用于仪表盘布局、可视化组件嵌套等场景。
在实际前端开发中（例如基于 React 的拖拽布局系统），我们常使用嵌套对象数组表示层级结构——如外层容器（GridWrapper）包含多个子组件（Highchart、tooltip）。当需要根据某个子组件的 ID（如 "Highchart_135_5de23"）动态获取其直接父容器的 i 值时，不能依赖硬编码传参，而应实现自动向上查找逻辑。
以下是一个简洁可靠的迭代式查找方案（推荐用于单层嵌套，即子节点仅存在于某一级 children 数组中）：
/**
* 在扁平根数组中查找指定子元素 ID 的直接父节点的 i 值
* @param {Array} treeArray - 顶层对象数组（每个对象可能含 children）
* @param {string} childId - 子节点的唯一标识符（对应字段 i）
* @returns {string|null} 父节点的 i 值；未找到返回 null
*/
function findParentId(treeArray, childId) {
for (const node of treeArray) {
const foundChild = node.children?.find(child => child.i === childId);
if (foundChild) return node.i;
}
return null;
}
// 使用示例
const arr = [/* 如题所示的嵌套数组 */];
const parentId = findParentId(arr, "Highchart_135_5de23");
console.log(parentId); // 输出: "GridWrapper_6_3d4c1"✅ 优势说明：
- 避免递归调用，无栈溢出风险；
- 时间复杂度为 O(n × m)，其中 n 是顶层节点数，m 是各节点 children 平均长度，实际性能优秀；
- 支持 children 为 undefined 或空数组的安全访问（借助可选链 ?.）。
⚠️ 注意事项：
- 此方法仅查找直接父节点，不支持跨多级查找（如孙子→祖父）；若需深度遍历任意层级，应改用递归版本（见下方扩展）；
- 若存在重复 i 值（不推荐），将返回第一个匹配的父节点；
- 确保数据结构稳定：children 字段必须是数组（或 undefined/null），否则 .find() 会报错。
? 进阶：支持任意深度的递归查找（返回最近父节点）
function findParentIdDeep(treeArray, childId) {
for (const node of treeArray) {
if (node.children && Array.isArray(node.children)) {
for (const child of node.children) {
if (child.i === childId) return node.i;
// 递归检查孙子及更深层级
const deepParent = findParentIdDeep([child], childId);
if (deepParent) return deepParent;
}
}
}
return null;
}? 总结：对于典型的两层结构（容器 + 组件），推荐使用首版迭代函数——它语义清晰、性能可控、易于测试与维护。将查找逻辑封装为纯函数，也便于后续集成至状态管理或 Hook 中（如 useParentId(childId)），提升代码复用性与可读性。
