从具有 childIds 的平面对象数组创建嵌套的对象数组

Question

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

我的平面数组（ID 在现实中是随机的，但为了清楚起见在这里更改了，嵌套可能很深）：

const tags = [
  {
    id: 'tag1',
    title: 'Tag 1',
    childIds: ['tag11', 'tag12'],
    root: true
  },
  {
    id: 'tag11',
    title: 'Tag 11',
    childIds: ['tag111', 'tag112'],
  },
  {
    id: 'tag12',
    title: 'Tag 12',
    childIds: ['tag121']
  },
  {
    id: 'tag111',
    title: 'Tag 111',
    childIds: []
  },
  {
    id: 'tag112',
    title: 'Tag 112',
    childIds: []
  },
  {
    id: 'tag121',
    title: 'Tag 121',
    childIds: []
  }
]

我想要的输出：

tagsNested = [
  {
    id: 'tag1',
    title: 'Tag 1',
    tags: [
      {
        id: 'tag11',
        title: 'tag 11',
        tags: [
          {
            id: 'tag111',
            title: 'Tag 111',
            tags: []
          },
          {
            id: 'tag112',
            title: 'Tag 112',
            tags: []
          }
        ]
      },
      {
        id: 'tag12',
        title: 'tag 12',
        tags: [
          {
            id: 'tag121',
            title: 'Tag 121',
            tags: []
          }
        ]
      }
    ]
  }

]

到目前为止，我尽最大努力将所有标签嵌套在任何标签下。

即我确实得到了一个嵌套数组，但每个标签数组都包含所有标签。

function unflatten(tag, nestedTags) {
  if (tag.childIds) {
    tag.childIds.forEach((childId) => {
      var childTag = tags.find((t) => t.id === childId)
      childTag.tags = unflatten(childTag, nestedTags)
      nestedTags.push(childTag)
    })
  }
  return nestedTags
}
const rootTag = tags.find((tag) => tag.root)
console.log(unflatten(rootTag, []))

我真的很努力地处理这些递归函数，并弄清楚如何让 return 语句为我提供正确的数据。

Answer 1

这是一个代码框 - https://codesandbox.io/s/green-dawn-3gpvz?file=/src/index.js。与您的要求的唯一区别是结果只是一个对象而不是数组，但是您可以简单地将这个单个元素包装成一个数组

function resolveChildren(tag, allTags) {
  const { childIds, root, ...rest } = tag;
  if (!childIds) return rest;

  return {
    ...rest,
    tags: childIds.map(childId =>
      resolveChildren(allTags.find(t => t.id === childId), allTags)
    )
  };
}

resolveChildren(tags.find(tag => !!tag.root), tags)

Answer 2

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

1. 给定root 标签（或任何标签）和tagsArray（扁平标签数组）
2. 过滤root的所有子标签
3. 然后为每个孩子找到它的所有孩子标签
4. 然后在没有子标签时返回标签

你可以试试这个代码 sn-p:

const tags = [
  {
    id: 'tag1',
    title: 'Tag 1',
    childIds: ['tag11', 'tag12'],
    root: true
  },
  {
    id: 'tag11',
    title: 'Tag 11',
    childIds: ['tag111', 'tag112'],
  },
  {
    id: 'tag12',
    title: 'Tag 12',
    childIds: ['tag121']
  },
  {
    id: 'tag111',
    title: 'Tag 111',
    childIds: []
  },
  {
    id: 'tag112',
    title: 'Tag 112',
    childIds: []
  },
  {
    id: 'tag121',
    title: 'Tag 121',
    childIds: []
  }
]

function buildTag({id, title, childIds}, tagsArray) {
  const tags = tagsArray
    .filter(tag => childIds.includes(tag.id))
    .map(tag => buildTag(tag, tagsArray))

  return {
      id,
      title,
      tags,
    }
}

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

/* 
tagsNested = [
  {
    id: 'tag1',
    title: 'Tag 1',
    tags: [
      {
        id: 'tag11',
        title: 'tag 11',
        tags: [
          {
            id: 'tag111',
            title: 'Tag 111',
            tags: []
          },
          {
            id: 'tag112',
            title: 'Tag 112',
            tags: []
          }
        ]
      },
      {
        id: 'tag12',
        title: 'tag 12',
        tags: [
          {
            id: 'tag121',
            title: 'Tag 121',
            tags: []
          }
        ]
      }
    ]
  }
]
*/

Answer 3

您可以采用迭代方法，将对象作为对节点的引用。

const tags = [{ id: 'tag1', title: 'Tag 1', childIds: ['tag11', 'tag12'], root: true }, { id: 'tag11', title: 'Tag 11', childIds: ['tag111', 'tag112'] }, { id: 'tag12', title: 'Tag 12', childIds: ['tag121'] }, { id: 'tag111', title: 'Tag 111', childIds: [] }, { id: 'tag112', title: 'Tag 112', childIds: [] }, { id: 'tag121', title: 'Tag 121', childIds: [] }],
    tree = function (array) {
        var t = {},
            tree = [];

        array.forEach(({ id, title, childIds, root }) => {
            Object.assign(
                t[id] = t[id] || {},
                { id, title, tags: childIds.map(id => t[id] = t[id] || { id }) }
            );
            if (root) tree.push(t[id]);
        });

        return tree;
    }(tags);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

您可以使用 Map 来设置每个节点的键，然后从中创建新的对象格式。最后从地图中删除具有父项的条目，以便根保留。所以真的，不需要root 属性。它间接地来自给定的关系。该算法不使用该属性：

const tags = [{id: 'tag1',title: 'Tag 1',childIds: ['tag11', 'tag12'],root: true},{id: 'tag11',title: 'Tag 11',childIds: ['tag111', 'tag112'],},{id: 'tag12',title: 'Tag 12',childIds: ['tag121']},{id: 'tag111',title: 'Tag 111',childIds: []},{id: 'tag112',title: 'Tag 112',childIds: []},{id: 'tag121',title: 'Tag 121',childIds: []}];

let map = new Map(tags.map(({id, title, childIds}) => [id, { id, title, tags: [] }]));
tags.forEach(tag => map.get(tag.id).tags = tag.childIds.map(id => map.get(id)));
tags.forEach(tag => tag.childIds.forEach(id => map.delete(id)));
let tagsNested = [...map.values()];
console.log(tagsNested);