使用childid从对象数组创建嵌套对象数组

问题
我有一个平面的对象数组，我需要一个（深度）嵌套的对象数组。

我的平面数组（ID 在现实中是随机的，但为了清楚起见在此处进行了更改，嵌套可能非常深）：

1. const tags = [
   
2.   {
   
3.     id: 'tag1',
   
4.     title: 'Tag 1',
   
5.     childIds: ['tag11', 'tag12'],
   
6.     root: true
   
7.   },
   
8.   {
   
9.     id: 'tag11',
   
10.     title: 'Tag 11',
    
11.     childIds: ['tag111', 'tag112'],
    
12.   },
    
13.   {
    
14.     id: 'tag12',
    
15.     title: 'Tag 12',
    
16.     childIds: ['tag121']
    
17.   },
    
18.   {
    
19.     id: 'tag111',
    
20.     title: 'Tag 111',
    
21.     childIds: []
    
22.   },
    
23.   {
    
24.     id: 'tag112',
    
25.     title: 'Tag 112',
    
26.     childIds: []
    
27.   },
    
28.   {
    
29.     id: 'tag121',
    
30.     title: 'Tag 121',
    
31.     childIds: []
    
32.   }
    
33. ]
    
34. 
    
35. 我想要的输出：
    
36. 
    
37. tagsNested = [
    
38.   {
    
39.     id: 'tag1',
    
40.     title: 'Tag 1',
    
41.     tags: [
    
42.       {
    
43.         id: 'tag11',
    
44.         title: 'tag 11',
    
45.         tags: [
    
46.           {
    
47.             id: 'tag111',
    
48.             title: 'Tag 111',
    
49.             tags: []
    
50.           },
    
51.           {
    
52.             id: 'tag112',
    
53.             title: 'Tag 112',
    
54.             tags: []
    
55.           }
    
56.         ]
    
57.       },
    
58.       {
    
59.         id: 'tag12',
    
60.         title: 'tag 12',
    
61.         tags: [
    
62.           {
    
63.             id: 'tag121',
    
64.             title: 'Tag 121',
    
65.             tags: []
    
66.           }
    
67.         ]
    
68.       }
    
69.     ]
    
70.   }
    
71. 
    
72. ]
    
73. 
    
74. 到目前为止，我最大的努力就是将所有标签嵌套在任何标签下。
    
75. 
    
76. 一、 我得到了一个嵌套数组，但是每个标记数组包含所有标记。
    
77. 
    
78. function unflatten(tag, nestedTags) {
    
79.   if (tag.childIds) {
    
80.     tag.childIds.forEach((childId) => {
    
81.       var childTag = tags.find((t) => t.id === childId)
    
82.       childTag.tags = unflatten(childTag, nestedTags)
    
83.       nestedTags.push(childTag)
    
84.     })
    
85.   }
    
86.   return nestedTags
    
87. }
    
88. const rootTag = tags.find((tag) => tag.root)
    
89. console.log(unflatten(rootTag, []))

复制代码

我真的在为这些递归函数苦苦挣扎，并弄清楚如何让 return 语句提供正确的数据。

回答
这是一种递归方法。它是这样工作的：

根

标签数组

根

您可以尝试以下代码片段：

1. const tags = [
   
2.   {
   
3.     id: 'tag1',
   
4.     title: 'Tag 1',
   
5.     childIds: ['tag11', 'tag12'],
   
6.     root: true
   
7.   },
   
8.   {
   
9.     id: 'tag11',
   
10.     title: 'Tag 11',
    
11.     childIds: ['tag111', 'tag112'],
    
12.   },
    
13.   {
    
14.     id: 'tag12',
    
15.     title: 'Tag 12',
    
16.     childIds: ['tag121']
    
17.   },
    
18.   {
    
19.     id: 'tag111',
    
20.     title: 'Tag 111',
    
21.     childIds: []
    
22.   },
    
23.   {
    
24.     id: 'tag112',
    
25.     title: 'Tag 112',
    
26.     childIds: []
    
27.   },
    
28.   {
    
29.     id: 'tag121',
    
30.     title: 'Tag 121',
    
31.     childIds: []
    
32.   }
    
33. ]
    
34. 
    
35. function buildTag({id, title, childIds}, tagsArray) {
    
36.   const tags = tagsArray
    
37.     .filter(tag => childIds.includes(tag.id))
    
38.     .map(tag => buildTag(tag, tagsArray))
    
39. 
    
40.   return {
    
41.       id,
    
42.       title,
    
43.       tags,
    
44.     }
    
45. }
    
46. 
    
47. const rootTag = tags.find((tag) => tag.root)
    
48. console.log([buildTag(rootTag, tags)])
    
49. 
    
50. /*
    
51. tagsNested = [
    
52.   {
    
53.     id: 'tag1',
    
54.     title: 'Tag 1',
    
55.     tags: [
    
56.       {
    
57.         id: 'tag11',
    
58.         title: 'tag 11',
    
59.         tags: [
    
60.           {
    
61.             id: 'tag111',
    
62.             title: 'Tag 111',
    
63.             tags: []
    
64.           },
    
65.           {
    
66.             id: 'tag112',
    
67.             title: 'Tag 112',
    
68.             tags: []
    
69.           }
    
70.         ]
    
71.       },
    
72.       {
    
73.         id: 'tag12',
    
74.         title: 'tag 12',
    
75.         tags: [
    
76.           {
    
77.             id: 'tag121',
    
78.             title: 'Tag 121',
    
79.             tags: []
    
80.           }
    
81.         ]
    
82.       }
    
83.     ]
    
84.   }
    
85. ]
    
86. */

复制代码