以递归方式填充数组，遍历 DOM 树

Question

当我从一个节点递归遍历一个通用树到他的所有孩子时，我必须填充一个字符串数组。在实践中，在从节点到叶子匹配的每个节点处，在 DOM 树中插入一个字符串。 我知道这是一个微不足道的问题，但我无法解决。 这是我写的代码：

function operationsToInsert(node) {
   var operations = [];
   operationsToInsertRec(node, operations);
   return operations;
}

function operationsToInsertRec(node, operations) {
   var childNodes = node.childNodes;
   operations.push("i(" + node.nodeName + ") ");
   for(var i = 0; i < childNodes.length; i++) {
      operationsToInsertRec(childNodes[i], operations);
      operations.push("i(" + childNodes[i].nodeName + ")");
   }   
}

但是有如下错误：

Uncaught TypeError: Cannot read property 'push' of undefined at line operations.push("insert(" + node.nodeName + ") ");

我该如何解决？ 谢谢

Answer 1

这是一种使用方便的 Array.prototype.reduce 函数来遍历树的方法，它使用了一种技巧，可以让它在类似数组的情况下工作：

function flatten(ops, n) {
    ops.push("i(" + n.nodeName + ") ");
    if (n.childNodes && n.childNodes.length) {
       [].reduce.call(n.childNodes, flatten, ops);
    }
    return ops;
}

var node = document.getElementById("start_here");
var ops = [node].reduce(flatten, []);

fiddle

Answer 2

问题是你只有一个功能，它不是你想象的那样！你重新定义了它，所以当你调用你认为的第一个参数时，你只提供了一个参数，其余参数隐式为undefined。

这是您的相同代码，简化为可演示的示例：

function operationsToInsert(node) {
   console.log("Definition #1");
}

function operationsToInsert(node, operations) {
    console.log("Definintion #2");
}

operationsToInsert();

您需要更改其中一个函数的名称，以免发生冲突。

---

---

编辑以解决新问题：

我认为您是说您的新问题是大多数节点在列表中出现两次。跟踪代码，您会看到除根节点之外的每个节点都处理了两次。在 operationsToInsertRec() 中，您将节点放入列表 (childNodes[i])，然后将其传递给 operationsToInsertRec()，然后将其放入列表 (node)。

这里有一个简单的改变来解决这个问题：

function operationsToInsert(node) {
   var operations = [];
   operations.push("i(" + node.nodeName + ") ");
   operationsToInsertRec(node, operations);
   return operations;
}

function operationsToInsertRec(node, operations) {
   var childNodes = node.childNodes;
   for(var i = 0; i < childNodes.length; i++) {
      operationsToInsertRec(childNodes[i], operations);
      operations.push("i(" + childNodes[i].nodeName + ")");
   }   
}

在operationsToInsert() 我推送根节点。那么operationsToInsertRec() 只处理子节点，因此每个节点只处理一次。

在对不同答案的评论中，我看到您谈到了遍历顺序的主题。在遍历树时，这些算法有几种不同的分类：depth-first，又细分为pre-order、in-order 、后序和广度优先。您可以在tree traversal 上的维基百科文章中找到更多信息。