Question

我有树对象：

const tree = [
    {
        key: "parent1", 
        id: "001", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
    {
        key: "parent2", 
        id: "002", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
]

我想循环遍历树，但我只得到2级：

tree.map((parentNode) => {
    console.log(`parentNode: ${parentNode.key}`);
    const childrenNode = parentNode.children;
    childrenNode.map((childNode) => {
         console.log(`childNode: ${childNode.key}`);
    });
});

我如何通过每个孩子及其孩子？我是否使用递归循环？

Answer 1

您可以使用一个获取实际级别的函数并返回数组方法的回调。

在内部，回调显示键并再次调用该函数，下一次迭代的级别增加。

＆＃13;

function iter(level) {
    return function (node)  {
        console.log('node', level, node.key);
        (node.children || []).forEach(iter(level + 1));
    };
}

var tree = [{ key: "parent1", id: "001", children: [{ key: "B", id: "002", children: [{ key: "C", id: "003", children: [{ key: "D", id: "004", children: [] }] }] }] }, { key: "parent2", id: "002", children: [{ key: "B", id: "002", children: [{ key: "C", id: "003", children: [{ key: "D", id: "004", children: [] }] }] }] }];

tree.forEach(iter(0));

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

Answer 2

怎么样：

const process = (level = 0) => (parentNode) => {
  console.log(`${level} parentNode: ${parentNode.key}`);
  if (parentNode.children && level < 2) {
    parentNode.children.forEach(process(level + 1));
  }
}

tree.forEach(process());

Answer 3

是的，您可以使用递归功能轻松跟踪它。

例如：

＆＃13;

const tree = [
    {
        key: "parent1", 
        id: "001", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
    {
        key: "parent2", 
        id: "002", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
]

function goThrough(node, parent = null) {
  if (!node) {
    return;
  }
  node.map((parentNode) => {
    console.log(`node: ${parentNode.key}, parent: ${parent}`);
    goThrough(parentNode.children, parentNode.key);    
  });
}

goThrough(tree);

＆＃13;

Answer 4

function printKey(obj){
    obj.map(x=>{
    console.log(x.key);
    if (x.hasOwnProperty('children')){
    printChild(x.children);
    }
  });
}

Answer 5

您可以递归迭代数组，如下所示：

const tree = [
        {
            key: "parent1", 
            id: "001", 
            children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}] }] 
        },
        {
            key: "parent2", 
            id: "002", 
            children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}] }] 
        }
    ]

function iterator(tree) {
  tree.forEach((parentNode) => {
    console.log(`Node: ${parentNode.key}`);
    if (parentNode.hasOwnProperty('children')) iterator(parentNode.children)       
  });
}

iterator(tree)

递归循环对象树

5 个答案: