javascript - 基于 parentId 和 id 属性嵌套平面对象

Question

给定一个平面级别的对象数组，根据 parent 和 id 属性嵌套它们的最有效和现代的方法是什么？顶层对象没有parentId，嵌套层数没有限制。

[{
  id: 'OS:MacOS',
  type: 'OS',
  value: 'MacOS'
}, {
  parentId: 'OS:MacOS',
  id: 'Version:Catalina',
  type: 'Version',
  value: 'Catalina'
}, {
  parentId: 'Version:Catalina',
  id: 'Browser:Chrome',
  type: 'Browser',
  value: 'Chrome'
}, {
  id: 'OS:Windows',
  type: 'OS',
  value: 'Windows'
}, {
  parentId: 'OS:Windows',
  id: 'Version:7',
  type: 'Version',
  value: '7'
}, {
  parentId: 'OS:MacOS',
  id: 'Version:Mojave',
  type: 'Version',
  value: 'Mojave'
}, {
  parentId: 'Version:Mojave',
  id: 'Browser:Chrome',
  type: 'Browser',
  value: 'Chrome'
}, {
  parentId: 'OS:Windows',
  id: 'Version:XP',
  type: 'Version',
  value: 'XP'
}, {
  parentId: 'Version:XP',
  id: 'Browser:Chrome',
  type: 'Browser',
  value: 'Chrome'
}]

其中 parentId 匹配相应的 id 字段。理想情况下，将它们转换为包含一个 children 数组字段，如下所示:

[{
  id: 'OS:MacOS',
  type: 'OS',
  value: 'MacOS',
  children: [
    {
      parentId: 'OS:MacOS',
      id: 'Version:Catalina',
      type: 'Version',
      value: 'Catalina',
      children: [
        {
          parentId: 'Version:Catalina',
          id: 'Browser:Chrome',
          type: 'Browser',
          value: 'Chrome'
        }
      ]
    },
    {
      parentId: 'OS:MacOS',
      id: 'Version:Mojave',
      type: 'Version',
      value: 'Mojave',
      children: [
        {
          parentId: 'Version:Mojave',
          id: 'Browser:Chrome',
          type: 'Browser',
          value: 'Chrome'
        }
      ]
    }
  ]
}, {
  id: 'OS:Windows',
  type: 'OS',
  value: 'Windows',
  children: [
    {
      parentId: 'OS:Windows',
      id: 'Version:7',
      type: 'Version',
      value: '7'
    },
    {
      parentId: 'OS:Windows',
      id: 'Version:XP',
      type: 'Version',
      value: 'XP',
      children: [
        {
          parentId: 'Version:XP',
          id: 'Browser:Chrome',
          type: 'Browser',
          value: 'Chrome'
        }
      ]
    }
  ]
}]

感谢您的想法!

Answer 1

您可以在递归函数中使用 reduce，该函数将传递当前元素 ID 并将其与嵌套调用中的父元素 ID 进行比较。

const data = [{"id":"OS:MacOS","type":"OS","value":"MacOS"},{"parentId":"OS:MacOS","id":"Version:Catalina","type":"Version","value":"Catalina"},{"parentId":"Version:Catalina","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"id":"OS:Windows","type":"OS","value":"Windows"},{"parentId":"OS:Windows","id":"Version:7","type":"Version","value":"7"},{"parentId":"OS:MacOS","id":"Version:Mojave","type":"Version","value":"Mojave"},{"parentId":"Version:Mojave","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"parentId":"OS:Windows","id":"Version:XP","type":"Version","value":"XP"},{"parentId":"Version:XP","id":"Browser:Chrome","type":"Browser","value":"Chrome"}]

function nested(data, pid = undefined) {
  return data.reduce((r, e) => {
    if (e.parentId == pid) {
      const obj = { ...e }
      const children = nested(data, e.id);
      if (children.length) obj.children = children;
      r.push(obj)
    }

    return r;
  }, [])
}

const result = nested(data);
console.log(result)