如何修复递归函数，其中最后一次每隔一次返回的结果是JavaScript？

我试图编写一个函数，基于JSON对象递归地将子对象附加到DOM

我遇到的问题是，递归中的最后一个返回覆盖了所有其他结果，我不知道为什么

这是我的代码：

变量标记=[{ 标签：“div”， 道具：[{ “类”：“meetup容器” }], 儿童：[{ 标签：“div”， 道具：[{ 班级：'meetup'， 项目范围：， itemtype:'http://schema.org/Event' }], 儿童：[{ 标签：“p”， 道具：[{ itemprop:“事件” }] }], }] }, { 标签：“a”， 道具：[{ href: }] }] 函数构建图{ let元素； graph.forEachnode=>{ 元素=document.createElementnode.tag； 如果node.props&&node.props.constructor==数组{ node.props.forEachprop=>{ 让propNames=Object.keysprop； propNames.forEachpropName=>{ return element.setAttributepropName，prop[propName]； }; }; } if node.children{ element.appendChildbuildDomnode.children； //返回元素.appendChildbuildDomnode.children； } }; 返回元素； }

---

让elements=buildDomtags 您的代码中有一些缺陷：

如果数组图中有多个元素，则只返回最后一个元素，而不是预期的元素数组。要修复该问题，请使用映射并返回结果数组。 forEach中的return语句是无用的。 函数buildDom应该返回一个元素数组，因为它接受一个对象数组，请参见1.，so element.appendChildbuildDomnode.children；再也不行了。使用forEach在该数组上循环。 话虽如此：

function buildDom(graph) {
  return graph.map((node) => {
    let element = document.createElement(node.tag);

    if (node.props && Array.isArray(node.props)) {
      node.props.forEach((prop) => {
        let propNames = Object.keys(prop);
        propNames.forEach((propName) =>
          element.setAttribute(propName, prop[propName])
        );
      });
    }

    if (node.children) {
      buildDom(node.children).forEach(child => element.appendChild(child));
    }

    return element;
  });
}

例如：

函数构建图{ return graph.mapnode=>{ 让element=document.createElementnode.tag； 如果node.props&&Array.isArraynode.props{ node.props.forEachprop=>{ 让propNames=Object.keysprop； propNames.forEachpropName=> element.setAttributepropName，属性[propName] ; }; } if node.children{ buildDomnode.children.forEachchild=>element.appendChildchild； } 返回元素； }; } let tags=[{tag:div，props:[{class:meetup container}]，子项：[{tag:div，props:[{class:meetup，itemscope:，itemtype:http://schema.org/Event}]，子项：[{tag:p，props:[{itemprop:event}]}]}，{tag:a，props:[{href:}]}]； 让result=document.getElementByIdresult， 元素=builddomtag； elements.forEachelement=>result.appendChildelement； 结果：检查滤芯以查看它

---

您的代码中有一些缺陷：

如果数组图中有多个元素，则只返回最后一个元素，而不是预期的元素数组。要修复该问题，请使用映射并返回结果数组。 forEach中的return语句是无用的。 函数buildDom应该返回一个元素数组，因为它接受一个对象数组，请参见1.，so element.appendChildbuildDomnode.children；再也不行了。使用forEach在该数组上循环。 话虽如此：

function buildDom(graph) {
  return graph.map((node) => {
    let element = document.createElement(node.tag);

    if (node.props && Array.isArray(node.props)) {
      node.props.forEach((prop) => {
        let propNames = Object.keys(prop);
        propNames.forEach((propName) =>
          element.setAttribute(propName, prop[propName])
        );
      });
    }

    if (node.children) {
      buildDom(node.children).forEach(child => element.appendChild(child));
    }

    return element;
  });
}

例如：

函数构建图{ return graph.mapnode=>{ 让element=document.createElementnode.tag； 如果node.props&&Array.isArraynode.props{ node.props.forEachprop=>{ 让propNames=Object.keysprop； propNames.forEachpropName=> element.setAttributepropName，属性[propName] ; }; } if node.children{ buildDomnode.children.forEachchild=>element.appendChildchild； } 返回元素； }; } let tags=[{tag:div，props:[{class:meetup container}]，子项：[{tag:div，props:[{class:meetup，itemscope:，itemtype:http://schema.org/Event}]，子项：[{tag:p，props:[{itemprop:event}]}]}，{tag:a，props:[{href:}]}]； 让result=document.getElementByIdresult， 元素=builddomtag； elements.forEachelement=>result.appendChildelement； 结果：检查滤芯以查看它

---

会有更多的孩子吗？还是永远只有一个孩子？@ibrahimmahrir从技术上讲，可能会有很多孩子，但出于我正在建设的特定目的，最大深度只有5或6层预期的输出是错误的：一些元素缺少一些道具，元素丢失了可能会有更多的孩子还是总是只有一个孩子？@ibrahimmahrir从技术上讲可能会有很多孩子，但出于我正在构建的特定目的，只有5或6级深度最大预期输出是错误的：一些元素缺少一些道具，并且元素缺少好的捕获！我最初使用.map精确地将数组反馈给函数，因为它需要数组，但可能在调试过程中，我最终弄乱了函数签名。谢谢！抢手货我最初使用.map精确地将数组反馈给函数，因为它需要数组，但可能在调试过程中，我最终弄乱了函数签名。谢谢 很多