javascript - forEach 只执行数组的最后一个元素

Question

这是我的代码：

var Tree = ( function ( _Obj ) {
  var _E,
      _N;
  _Obj.forEach ( function ( e ) {
    _E = document.createDocumentFragment();
    if ( "tagName" in e ) {
      _N = document.createElement( e.tagName ); 
    }
    if ( "childNode" in e ) {
      _N.appendChild( Tree ( e.childNode ) );
    }
  });
  _E.appendChild ( _N );
  return _E;
});

这里是该函数的参数：

Fragment = [{ // firstNode
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "string",
        "childNode" : [{
          "tagName" : "span",
        }]
      }]
    }]
  },
  { //secondNode
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "span",
        "childNode" : [{
          "tagName" : "div"
        }]
      }]
    }]
  }
];

此代码应返回一个文档片段，其中包含var Fragment. 如果你看，JSON 是基于 atagName和childNode元素的；因为每个对象都依赖于一个tagName，所以函数返回一个同名的新元素。

但是这里出了点问题，该函数只返回第二个节点Fragment：

#document-fragment
|_<div>
  |_<p>
    |_<span>
        <div></div>
      </span>
    </p>
  </div>

这等于：

{
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "span",
        "childNode" : [{
          "tagName" : "div"
        }]
      }]
    }]
  }

但是，第一个节点发生了什么？

Answer 1

看起来你的 forEach 循环通过并分配_N给正确的东西，但只有在整个循环通过_N后才附加。_E将您_E.appendChild(_N)的每个移动到您的内部和底部。

Answer 2

var Tree = ( function ( _Obj ) {
  var _E,
      _N;
  _E = document.createDocumentFragment(); // put this out of forEach
  _Obj.forEach ( function ( e ) {
    if ( "tagName" in e ) {
      _N = document.createElement( e.tagName ); 
    }
    if ( "childNode" in e ) {
      _N.appendChild( Tree ( e.childNode ) );
    }
    _E.appendChild ( _N ); // put this inside of forEach
  });
  return _E;
});