如何动态为对象添加子节点？附多层添加操作示例

我来帮你搞定这个动态添加树形子节点的需求～核心思路是先递归定位到目标节点，再为它添加（或追加）子节点，不管节点嵌套多少层都能适用。

实现步骤 #

1. 编写递归函数查找指定id的节点：遍历节点数组，若当前节点匹配则返回；若有子节点则递归遍历子节点。
2. 编写添加子节点的函数：调用查找函数找到父节点后，初始化children属性（如果不存在），再添加子节点。

完整代码示例 #

// 初始树形数据
let ob = [ 
  {name: "root", id: 1}, 
  {name: "root2", id: 2} 
];

/**
 * 递归查找指定id的节点
 * @param {Array} nodes - 要查找的节点数组
 * @param {number|string} targetId - 目标节点的id
 * @returns {object|null} 找到的节点或null
 */
function findNodeById(nodes, targetId) {
  for (const node of nodes) {
    // 匹配到目标节点直接返回
    if (node.id === targetId) {
      return node;
    }
    // 如果当前节点有子节点，递归查找子节点
    if (node.children && node.children.length > 0) {
      const foundNode = findNodeById(node.children, targetId);
      if (foundNode) return foundNode;
    }
  }
  return null; // 未找到目标节点
}

/**
 * 为指定id的节点添加子节点
 * @param {Array} nodes - 根节点数组
 * @param {number|string} parentId - 父节点的id
 * @param {object|Array} childNodes - 要添加的子节点（单个对象或数组）
 * @returns {boolean} 添加成功返回true，失败返回false
 */
function addChildNode(nodes, parentId, childNodes) {
  const parentNode = findNodeById(nodes, parentId);
  if (!parentNode) {
    console.warn(`未找到id为${parentId}的节点`);
    return false;
  }
  // 初始化children属性（如果父节点没有的话）
  if (!parentNode.children) {
    parentNode.children = [];
  }
  // 处理单个子节点或子节点数组
  if (Array.isArray(childNodes)) {
    parentNode.children.push(...childNodes);
  } else {
    parentNode.children.push(childNodes);
  }
  return true;
}

// 调用示例
// 1. 给id为1的节点添加子节点
addChildNode(ob, 1, [
  {name: 'sub1', id: 5},
  {name: 'sub2', id: 6}
]);
console.log('第一次添加后的数据：', JSON.stringify(ob, null, 2));

// 2. 给id为6的节点添加子节点
addChildNode(ob, 6, [
  {name: 'subsub1', id: 7},
  {name: 'subsub2', id: 8}
]);
console.log('第二次添加后的数据：', JSON.stringify(ob, null, 2));

效果说明 #

• 第一次调用后，id=1的节点会新增children属性，包含两个子节点；
• 第二次调用后，id=6的子节点也会新增自己的children属性，实现多层嵌套的动态添加。

这个方案的优点是支持任意层级的节点查找和添加，而且兼容性好，在普通JavaScript环境就能直接使用。

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