Question

鉴于结构：

{
    id: 'id-1',
    name: 'name1',
    ancestors: []
},{
    id: 'id-2',
    name: 'name2',
    ancestors: []
},{
    id: 'id-3',
    name: 'name3',
    ancestors: ['id-1']
},{
    id: 'id-4',
    name: 'name4',
    ancestors: ['id-3', 'id-1']
}

假设它们没有以任何有意义的方式排序。
祖先字段是一个显示最高级别路径的数组。

构建嵌套列表（ul）的最有效方法是什么？

我的第一个想法是递归方法，但这似乎很麻烦，因为它会反复搜索整个列表。因为这将是在浏览器中运行的javascript解决方案，可能会有问题。

Answer 1

您可以构建一个树，然后渲染一个嵌套列表。

Equals

Answer 2

构建地图以加快查找速度：

 const byId = new Map(array.map(el => ([el.id, el]));

然后创建一个嵌套树非常简单，我们只检查一个节点是否没有祖先，然后是一个根元素，否则我们将它添加为父节点的子节点：

 const root = [];

 for(const obj of array) {
   if(obj.ancestors.length) {
     const parent = byId.get(obj.ancestors[0]);
     if(parent.children) {
       parent.children.push(obj);
     } else {
       parent.children = [obj];
     }
   } else {
    root.push(obj);
   }
 }

所以现在root包含一个嵌套树，你可以使用递归方法来遍历它：

 function traverse(elements) {
    for(const el of elements) {
      // Render ...
      traverse(el.children || []);
    }
 }

 traverse(root);

从祖先数据构建嵌套列表？

2 个答案: