JavaScript - 遍历数组对象的层级结构

Question

我有一些继承来的 JavaScript 代码。它基于 JSON 数据绘制分层树形结构（使用 D3 版本 3 库）。这段代码可以工作。我需要进行一个小修改，但如何进行修改是问题所在。我有一个叫做 treeData 的对象。treeData 是树中节点的分层列表。每个节点都有属性，例如名称、ID、深度、x、y 和 children。Children 是一个数组，它指向当前节点的子节点。因此，子节点可以有子节点，可以有子节点等等。如果我查看 treeData 对象，我会看到“根”节点，并且我会看到它有 10 个子节点。

“children”数组在结构上与“parent”相同...这显示了展开第一个子元素，我看到它有3个子元素。我的数据通常有3-4级深度。 我的挑战是需要对树中的所有节点运行函数。我确信有一种优雅的方法来做到这一点，但我不知道是什么...我需要类似于...

var myNode;
for (var zz = 0; zz <= treeData.children.length; zz++) {
myNode = treeData.children[zz];
collapseNode(myNode);
}

问题在于这只查看了一个层级，而没有遍历整个层次结构...我该如何重写代码以访问层次结构中的每个节点？

- user1009073

---

你需要使用递归函数来实现这个。你实际上想要得到什么呢？ - undefined

这可能对你有所帮助- https://dev59.com/eXRB5IYBdhLWcg3wF0DH - undefined

@Manish - 最终结果是...对于层次结构中的每个对象，调用collapseNode(当前节点)。 - undefined

@Tushar - 这给了我所需的代码。最终我使用了traverse(o)片段。如果你提交那个，我会接受它作为答案。 - undefined

好的，我就在这里提交了！ - undefined

Answer 1

尝试这种递归的方法。

function processNode(node)
{
    collapseNode(myNode); //logic for current node
    (treeData.children || []).forEach( function( chidNode ){
       processNode( chidNode ); //if there are children invoke the same method for each child node
    });
}
processNode( treeData ); //invoke for your treeData

- gurvinder372

---

我无法获取行...（treeData.children || []）。forEach（function（chidNode）{...进行遍历。它似乎只调用当前节点和一个子节点... - undefined

@user1009073，你能否分享一些treeData的样本数据给我进行测试？ - undefined

Answer 2

尝试一下这个 -

function traverse(o) {
    for (i in o) {
        // if o is an object, traverse it again
        if (!!o[i] && typeof(o[i])=="object") {
            console.log(i, o[i])
            traverse(o[i]);
        }
    }
}

- Tushar Walzade

Answer 3

function traverse(array){
  for(const obj of array){
     //do whatever with obj, than go deeper
     traverse(obj.children);
  }
}

如果你通过递归深入研究，那就很简单。

- Jonas Wilms