Prudence
Ce référentiel n'est plus maintenu. Considérez la section ci-dessous pour les alternatives.
Convertit un tableau d'éléments avec des ID et des ID parentaux en arbre imbriqué de manière performante (complexité temporelle O(n) ). Exécute dans les navigateurs et le nœud.
D'autres packages ont des hypothèses plus strictes ou ne sont pas aussi performants, car ils utilisent souvent des boucles imbriquées ou une récursivité. Par exemple:
O-UNFLATTEN exige que l'entrée soit ordonnée de telle sorte que les nœuds parents portent toujours devant leurs enfants. Un-Fl soutten-tree utilise 2 boucles imbriquées (complexité temporelle O(n^2) ).
Cette implémentation ne nécessite aucun ordre d'éléments dans le tableau d'entrée et se concentre sur les performances d'exécution. C'est le plus rapide parmi 4 packages différents, vous pouvez trouver les repères ici. Il utilise un index et une seule boucle (complexité temporelle O(n) ). Il a été inspiré par cette discussion sur Stackoverflow.
yarn add performant-array-to-tree
ou si vous utilisez NPM
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 : "ü" } ,
] ) ;Qui se traduit par le tableau suivant:
[
{
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 : [ ] } ,
] ,
} ,
] ; Vous pouvez fournir un deuxième argument à ArrayTotree avec des options de configuration. En ce moment, vous pouvez définir ce qui suit:
id : clé du champ ID de l'élément. Fonctionne également avec des propriétés imbriquées (par exemple "nested.parentId" ). Par défaut: "id" .parentId : clé du champ ID du parent de l'élément. Fonctionne également avec des propriétés imbriquées (par exemple "nested.parentId" ). Par défaut: "parentId" .nestedIds : Option pour activer / désactiver les ID imbriqués. Par défaut: true .childrenField : clé qui contiendra tous les nœuds enfants du nœud parent. Par défaut: "children"dataField : clé qui contiendra toutes les propriétés / données des éléments d'origine. Définissez sur NULL si vous ne voulez pas de conteneur. Par défaut: "data"throwIfOrphans : Option pour lancer une erreur si le tableau d'articles contient un ou plusieurs articles qui n'ont pas de parents dans le tableau ou si le tableau d'articles contient des éléments avec une relation parent / enfant circulaire. Cette option a une petite pénalité d'exécution, donc elle est désactivée par défaut. Lorsqu'il est activé, la fonction lancera une erreur contenant les parentales qui n'ont pas été trouvées dans le tableau des éléments, ou dans le cas de relations sur les éléments circulaires, une erreur générique. La fonction lancera une erreur si le nombre de nœuds dans l'arborescence est plus petit que le nombre de nœuds dans le tableau d'origine. Lorsqu'il est désactivé, la fonction ignorera simplement les orphelins et les relations circulaires et ne les ajoutera pas à l'arbre. Par défaut: falserootParentIds : Objet avec les ID parent comme les touches et les valeurs true qui doivent être considérées comme les éléments supérieurs ou racines de l'arbre. Ceci est utile lorsque votre arbre est un sous-ensemble d'arbre complet, ce qui signifie qu'il n'y a pas d'élément dont l'ID parent est celui des undefined , null ou '' . Le tableau dans lequel vous transmettez remplacera la valeur par défaut. undefined et null sont toujours considérés comme des parapistides root. Pour plus de détails, voir # 23. Par défaut: {'': true}assign : Option qui permet à Object.assign au lieu de l'opérateur de diffusion pour créer un élément dans l'arborescence lorsque dataField est null . Ceci est utile si vos éléments ont un prototype qui doit être maintenu. Si activé et dataField est null , l'élément de nœud d'origine sera utilisé et la propriété children sera attribuée, appelant tout secteur sur ce champ. Si dataField n'est pas null , cette option n'a aucun effet, car le nœud d'origine sera utilisé sous le dataField d'un nouvel objet. Si vous ne savez pas si vous devez l'activer, il est probablement bon de le laisser désactivé. Par défaut: falseExemple:
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" }
) ;Qui produit:
[
{
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 : [ ] } ,
] ,
} ,
] ;Exemple sans champ de données:
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 }
) ;Qui produit:
[
{
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 : [ ] } ,
] ,
} ,
] ;Exemple avec ID imbriqué / Propriétés Parentid:
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" }
) ;Qui produit:
[
{
data : { num : { id : "4" } , parent : { parentId : null } , custom : "abc" } ,
children : [
{
data : { num : { id : "31" } , parent : { parentId : "4" } , custom : "12" } ,
children : [ ] ,
} ,
] ,
} ,
] ; Ce projet comprend des types, il suffit d'importer le module comme d'habitude:
import { arrayToTree } from "performant-array-to-tree" ;
const tree = arrayToTree ( array ) ; yarn version Pour créer une nouvelle version npm login npm publish --access public pour le publier à NPM