找回密码
 立即注册
tagtitlechildIdstags | 软件设计/软件工程 2022-05-06 214 0star收藏 版权: . 保留作者信息 . 禁止商业使用 . 禁止修改作品
问题
我有一个平面的对象数组,我需要一个(深度)嵌套的对象数组。

我的平面数组(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. tagsNested = [
  36.   {
  37.     id: 'tag1',
  38.     title: 'Tag 1',
  39.     tags: [
  40.       {
  41.         id: 'tag11',
  42.         title: 'tag 11',
  43.         tags: [
  44.           {
  45.             id: 'tag111',
  46.             title: 'Tag 111',
  47.             tags: []
  48.           },
  49.           {
  50.             id: 'tag112',
  51.             title: 'Tag 112',
  52.             tags: []
  53.           }
  54.         ]
  55.       },
  56.       {
  57.         id: 'tag12',
  58.         title: 'tag 12',
  59.         tags: [
  60.           {
  61.             id: 'tag121',
  62.             title: 'Tag 121',
  63.             tags: []
  64.           }
  65.         ]
  66.       }
  67.     ]
  68.   }

  69. ]

  70. 到目前为止,我最大的努力就是将所有标签嵌套在任何标签下。

  71. 一、 我得到了一个嵌套数组,但是每个标记数组包含所有标记。

  72. function unflatten(tag, nestedTags) {
  73.   if (tag.childIds) {
  74.     tag.childIds.forEach((childId) => {
  75.       var childTag = tags.find((t) => t.id === childId)
  76.       childTag.tags = unflatten(childTag, nestedTags)
  77.       nestedTags.push(childTag)
  78.     })
  79.   }
  80.   return nestedTags
  81. }
  82. const rootTag = tags.find((tag) => tag.root)
  83. 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. function buildTag({id, title, childIds}, tagsArray) {
  35.   const tags = tagsArray
  36.     .filter(tag => childIds.includes(tag.id))
  37.     .map(tag => buildTag(tag, tagsArray))

  38.   return {
  39.       id,
  40.       title,
  41.       tags,
  42.     }
  43. }

  44. const rootTag = tags.find((tag) => tag.root)
  45. console.log([buildTag(rootTag, tags)])

  46. /*
  47. tagsNested = [
  48.   {
  49.     id: 'tag1',
  50.     title: 'Tag 1',
  51.     tags: [
  52.       {
  53.         id: 'tag11',
  54.         title: 'tag 11',
  55.         tags: [
  56.           {
  57.             id: 'tag111',
  58.             title: 'Tag 111',
  59.             tags: []
  60.           },
  61.           {
  62.             id: 'tag112',
  63.             title: 'Tag 112',
  64.             tags: []
  65.           }
  66.         ]
  67.       },
  68.       {
  69.         id: 'tag12',
  70.         title: 'tag 12',
  71.         tags: [
  72.           {
  73.             id: 'tag121',
  74.             title: 'Tag 121',
  75.             tags: []
  76.           }
  77.         ]
  78.       }
  79.     ]
  80.   }
  81. ]
  82. */
复制代码






上一篇:使用 Kruskal 算法找到图的最小生成树
下一篇:更改下载目录而不在 chrome 上弹出