Question

我的数据如下：

let nodes= [{
    name: 'one',
    id: 1
    children: [{
        name: 'one-one',
        id: 11,
        children: [{
             name: 'one-one-one',
             id: 111,
             children: []
        },
        {
            name: 'one-one-two',
            id: 112,
            children: []
        }]
    },
    {
        name: 'one-two',
        id: 12,
        children: []
    }]
},
{
   name: 'two',
   id: 2,
   children: []
}];

我正在尝试对该对象执行一些操作，例如查找ID或检查每个节点的值。到目前为止，我已经完成了一个递归函数的实现，该递归函数用for循环包装，但是看起来很草率，而不是“反应方式”。

我找到ID的功能如下：

findNodeById = (currNode, id) => {
        if (currNode.id === id) {
            return currNode;
        }

        if (currNode.hasOwnProperty('children')) {
            for (const i in currNode.children) {
                const foundNode = this.findNodeById(currNode.children[i], id);
                if (foundNode) {
                    return foundNode ;
                }
            }
        }

    return null;
};

for (const node in nodes) {
     const currNode= nodes[node],
           selectedValue = findNodeById(currNode, 12);

     if(selectedValue) {
         break;
     }
}

难道没有更好，更聪明的方法来做到这一点吗？

Answer 1

正是出于这个原因，您不应该首先将数据结构化。您应该通过使用id作为对实际对象的引用来使数据结构平坦。通过将节点的id用作node对象中的键，我们可以获得O（1）性能。

let nodes= {
    '1': {
        name: 'one',
        id: 1,
        parent: null
        children: [11, 12],
    },
    '11': {
        name: 'one-one',
        id: 11,
        parent: 1,
        children: [111, 112],
    },
    '111': {
        name: 'one-one-one',
        id: 111,
        parent: 11,
        children: [],
    },
    '112': {
        name: 'one-one-two',
        id: 112,
        parent: 11,
        children: [],
    },
    '12': {
        name: 'one-two',
        id: 12,
        parent: 1,
        children: [],
    },
    '2' :{
        name: 'two',
        id: 2,
        parent: null,
        children: [],
    }
};

现在，获取节点或更新列表中的节点变得很简单。但是，如果要将树绘制到屏幕上，则仍需要一种将列表转换为树的方法。对于这种情况，我将使用诸如以下的库： https://www.npmjs.com/package/performant-array-to-tree

在React中寻找深层嵌套对象

1 个答案: