TypeScript 如何查找指定属性的树节点并向其children数组中添加新节点

基础实现（适用于目标节点在根层级的场景） #

你给出的示例数据中目标节点Collecteurs d'espace client处于树的根节点层级，直接遍历根数组查找后操作即可：

// 定义要新增的TreeNode类型节点
const newNode: TreeNode = {
  name: "自定义节点名称" // 替换为实际需要的name值
};

// 查找目标节点
const targetNode = TREE_DATA.find(item => item.name === "Collecteurs d'espace client");

if (targetNode) {
  // 兼容children属性未初始化的情况
  targetNode.children = targetNode.children || [];
  targetNode.children.push(newNode);
}

通用递归实现（支持任意层级节点查找） #

如果后续目标节点可能出现在树的任意层级，可以使用递归方法实现全局查找：

/**
 * 递归查找指定name的树节点
 * @param tree 树结构数组
 * @param targetName 目标节点的name属性值
 * @returns 找到的节点，未找到返回undefined
 */
function findTreeNode(tree: TreeNode[], targetName: string): TreeNode | undefined {
  for (const node of tree) {
    if (node.name === targetName) return node;
    if (node.children?.length) {
      const matchedNode = findTreeNode(node.children, targetName);
      if (matchedNode) return matchedNode;
    }
  }
  return undefined;
}

// 调用示例
const addNode: TreeNode = { name: "新节点名称" };
const target = findTreeNode(TREE_DATA, "Collecteurs d'espace client");
if (target) {
  target.children ??= [];
  target.children.push(addNode);
}

注意事项 #

• 如果你需要保持原TREE_DATA不可变，操作前需要先对原树做深拷贝，避免修改原始数据。
• 代码中使用的可选链?.、空值合并赋值??=语法需要TypeScript 3.7及以上版本支持，低版本可以替换为普通的if条件判断写法。

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