簡體   English   中英

來自 parentIds 數組的 JS 樹從 rootId 開始到 n 級深度

[英]JS Tree from array of parentIds start by rootId by n level depth

我有一個像這樣的數組:

const dataset=[
 { id:1, a:5, parentId:null},
 { id:2, a:6, parentId:1},
 { id:3, a:7, parentId:2},
 { id:4, a:8, parentId:1},
 { id:5, a:8, parentId:3},
]

我想創建一個像這樣的樹:

[
 { id:1, a:5, parentId:null, 
   children:[
             {id:2, a:6, parentId:1, 
                   children:[
                            { id:3, a:7, parentId:2, 
                              children: [{ id:5, a:8, parentId:3}]
                            }                                     
                            ]
             },
             {id:4, a:8, parentId:1, children: null}
   ]
 }
]

我通過以下 function 到達了它:

const result =createDataTree(dataset, 'parentIdField')

const createDataTree = (dataset, parentIdField = 'parentId') => {
  const hashTable = Object.create(null);
  dataset.forEach((aData) => {
    return hashTable[aData.id] = { ...aData, children: [] };
  });
  const dataTree = [];
    dataset.forEach((aData) => {
      if (aData[parentIdField]) hashTable[aData[parentIdField]].children.push(hashTable[aData.id]);
      else dataTree.push(hashTable[aData.id]);
    });
  return dataTree;
};

您可以在此處查看沙箱: https://codesandbox.io/s/smoosh-frog-bb82dl

我們能否使用rootParentId的參數和生成子級的深度級別來改進相同的 function,並生成僅以 rootParentId 開始且所需級別的深度從 rootParentId 開始的相同樹?

就像是:

const rootParentId=2
const depth=1;
const result =createDataTree(dataset, 'parentIdField', rootParentId, depth)

預期結果將是:

[
 {id:2, a:6, parentId:1, 
   children:[
             { id:3, a:7, parentId:2, children: null}                                     
            ]
  }
]

這樣做的最佳優化方法是什么?

正確答案:

const dataset=[
  { id:1, a:5, parentId:null},
  { id:2, a:6, parentId:1},
  { id:3, a:7, parentId:2},
  { id:4, a:8, parentId:1},
  { id:5, a:8, parentId:3},
 ];
 const rootParentId = 1;
 const depth = 2;
 
 function createDataTree(dataset, parentIdField, rootParentId, depth) {
  const tree = dataset.filter(item => item[parentIdField] === rootParentId);
  if (depth === 1) return tree;
  const children = dataset.filter(item => item[parentIdField] !== rootParentId);
  tree.forEach(item => {
    item.children = createDataTree(children, parentIdField, item.id, depth - 1);
  });
  return tree;
}
 
 function getRootNode(dataset, parentIdField, rootParentId) {
     for (let i = 0; i < dataset.length; i++) {
         if (dataset[i].id === rootParentId) {
             return dataset[i];
         }
     }
 }
 
 const rootNode = getRootNode(dataset, 'parentId', rootParentId);
 rootNode.children = createDataTree(dataset, 'parentId', rootParentId, depth);
 console.log(rootNode);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM