Vorsicht
Dieses Repository wird nicht mehr aufrechterhalten. Betrachten Sie den folgenden Abschnitt für Alternativen.
Konvertiert eine Reihe von Elementen mit IDs und übergeordneten IDs auf eine Performantin in einen verschachtelten Baum (Zeitkomplexität O(n) ). Läuft in Browsern und Knoten.
Andere Pakete haben strengere Annahmen oder sind nicht so leistungsfähig, da sie häufig verschachtelte Schleifen oder Rekursion verwenden. Zum Beispiel:
O-unflatten erfordert, dass die Eingabe so bestellt wird, dass Elternknoten immer vor ihren Kindern kommen. UN-Flatten-Baum verwendet 2 verschachtelte Schleifen (Zeitkomplexität O(n^2) ).
Diese Implementierung erfordert keine Reihenfolge der Elemente im Eingabearray und konzentriert sich auf die Laufzeitleistung. Es ist der schnellste unter 4 verschiedenen Paketen, finden Sie hier die Benchmarks. Es verwendet einen Index und eine einzelne Schleife (Zeitkomplexität O(n) ). Es wurde von dieser Diskussion über Stackoverflow inspiriert.
yarn add performant-array-to-tree
oder wenn Sie NPM verwenden
npm install --save performant-array-to-tree
const tree = arrayToTree ( [
{ id : "4" , parentId : null , custom : "abc" } ,
{ id : "31" , parentId : "4" , custom : "12" } ,
{ id : "1941" , parentId : "418" , custom : "de" } ,
{ id : "1" , parentId : "418" , custom : "ZZZz" } ,
{ id : "418" , parentId : null , custom : "ü" } ,
] ) ;Was zum folgenden Array führt:
[
{
data : { id : "4" , parentId : null , custom : "abc" } ,
children : [
{ data : { id : "31" , parentId : "4" , custom : "12" } , children : [ ] } ,
] ,
} ,
{
data : { id : "418" , parentId : null , custom : "ü" } ,
children : [
{ data : { id : "1941" , parentId : "418" , custom : "de" } , children : [ ] } ,
{ data : { id : "1" , parentId : "418" , custom : "ZZZz" } , children : [ ] } ,
] ,
} ,
] ; Sie können ein zweites Argument für ArrayTotree mit Konfigurationsoptionen vorlegen. Im Moment können Sie Folgendes festlegen:
id : Schlüssel des ID -Felds des Elements. Arbeitet auch mit verschachtelten Eigenschaften (z. B. "nested.parentId" ). Standard: "id" .parentId : Schlüssel des ID -Felds des übergeordneten Elements. Arbeitet auch mit verschachtelten Eigenschaften (z. B. "nested.parentId" ). Standard: "parentId" .nestedIds : Option zum Aktivieren/Deaktivieren von verschachtelten IDs. Standard: true .childrenField : Schlüssel, der alle untergeordneten Knoten des übergeordneten Knotens enthält. Standard: "children"dataField : Schlüssel, der alle Eigenschaften/Daten der Originalelemente enthält. Setzen Sie auf NULL, wenn Sie keinen Container wollen. Standard: "data"throwIfOrphans : Option zum Fehler, wenn das Array von Elementen ein oder mehrere Elemente enthält, die keine Eltern im Array enthalten, oder wenn das Array von Elementen Elemente mit einer kreisförmigen Eltern/Kinderbeziehung enthält. Diese Option hat eine kleine Laufzeitstrafe und ist daher standardmäßig deaktiviert. Wenn die Funktion aktiviert ist, wirft die Funktion einen Fehler, der die ParentIDs enthält, die nicht im Element -Array gefunden wurden, oder im Fall von nur kreisförmigen Elementenbeziehungen einen generischen Fehler. Die Funktion wirft einen Fehler auf, wenn die Anzahl der Knoten im Baum kleiner ist als die Anzahl der Knoten im ursprünglichen Array. Wenn die Funktion deaktiviert ist, ignoriert die Funktion nur Waisen und kreisförmige Beziehungen und fügt sie nicht zum Baum hinzu. Standard: falserootParentIds : Objekt mit übergeordneten IDs als Schlüssel und true als Werte, die als die oberen oder Rootelemente des Baumes angesehen werden sollten. Dies ist nützlich, wenn Ihr Baum eine Untergruppe von Vollbaum ist, was bedeutet, dass es keinen Element gibt, dessen übergeordnete ID einer von undefined , null oder '' ist. Das von Ihnen übergebene Array ersetzt den Standardwert. undefined und null gelten immer als RootParentiden. Weitere Informationen finden Sie unter #23. Standard: {'': true}assign : Option, mit der Object.assign anstelle des Spread -Operators ein Element im Baum erstellt wird, wenn dataField null ist. Dies ist nützlich, wenn Ihre Artikel einen Prototyp haben, der beibehalten werden sollte. Wenn es aktiviert ist und dataField null ist, wird das ursprüngliche Knotenelement verwendet, und die children wird zugewiesen, wobei alle Setter auf diesem Feld aufgerufen werden. Wenn dataField nicht null ist, hat diese Option keinen Einfluss, da der ursprüngliche Knoten unter dem dataField eines neuen Objekts verwendet wird. Wenn Sie sich nicht sicher sind, ob Sie dies aktivieren müssen, ist es wahrscheinlich in Ordnung, es deaktiviert zu lassen. Standard: falseBeispiel:
const tree = arrayToTree (
[
{ num : "4" , ref : null , custom : "abc" } ,
{ num : "31" , ref : "4" , custom : "12" } ,
{ num : "1941" , ref : "418" , custom : "de" } ,
{ num : "1" , ref : "418" , custom : "ZZZz" } ,
{ num : "418" , ref : null , custom : "ü" } ,
] ,
{ id : "num" , parentId : "ref" , childrenField : "nodes" }
) ;Was produziert:
[
{
data : { num : "4" , ref : null , custom : "abc" } ,
nodes : [ { data : { num : "31" , ref : "4" , custom : "12" } , nodes : [ ] } ] ,
} ,
{
data : { num : "418" , ref : null , custom : "ü" } ,
nodes : [
{ data : { num : "1941" , ref : "418" , custom : "de" } , nodes : [ ] } ,
{ data : { num : "1" , ref : "418" , custom : "ZZZz" } , nodes : [ ] } ,
] ,
} ,
] ;Beispiel ohne Datenfeld:
const tree = arrayToTree (
[
{ id : "4" , parentId : null , custom : "abc" } ,
{ id : "31" , parentId : "4" , custom : "12" } ,
{ id : "1941" , parentId : "418" , custom : "de" } ,
{ id : "1" , parentId : "418" , custom : "ZZZz" } ,
{ id : "418" , parentId : null , custom : "ü" } ,
] ,
{ dataField : null }
) ;Was produziert:
[
{
id : "4" ,
parentId : null ,
custom : "abc" ,
children : [ { id : "31" , parentId : "4" , custom : "12" , children : [ ] } ] ,
} ,
{
id : "418" ,
parentId : null ,
custom : "ü" ,
children : [
{ id : "1941" , parentId : "418" , custom : "de" , children : [ ] } ,
{ id : "1" , parentId : "418" , custom : "ZZZz" , children : [ ] } ,
] ,
} ,
] ;Beispiel mit verschachtelten ID/Parentid -Eigenschaften:
const tree = arrayToTree (
[
{ num : { id : "4" } , parent : { parentId : null } , custom : "abc" } ,
{ num : { id : "31" } , parent : { parentId : "4" } , custom : "12" } ,
] ,
{ id : "num.id" , parentId : "parent.parentId" }
) ;Was produziert:
[
{
data : { num : { id : "4" } , parent : { parentId : null } , custom : "abc" } ,
children : [
{
data : { num : { id : "31" } , parent : { parentId : "4" } , custom : "12" } ,
children : [ ] ,
} ,
] ,
} ,
] ; Dieses Projekt enthält Typen. Importieren Sie einfach das Modul wie gewohnt:
import { arrayToTree } from "performant-array-to-tree" ;
const tree = arrayToTree ( array ) ; yarn version zum Erstellen einer neuen Version npm login npm publish --access public um sie an NPM zu veröffentlichen