javascript - 从有序的字符串数组及其在 JavaScript 中的关系创建父子树状对象数组

Question

我有一个对象数组，其中每个对象都有一个属性 ( parentsList)，指示当前项目所属的类别，例如：

const data = [
    {
        ...other properties,
        "parentsList": [
            "Assets",
            "Icons"
        ],
    },
    {
        ...other properties,
        "parentsList": [
            "Assets",
            "Fonts"
        ],
    },
   {
      ...other properties,
       "parentsList": [
            "Programming",
            "JavaScript",
            "Docs"
        ],
   },
   {
      ...other properties,
       "parentsList": [
            "Programming",
            "JavaScript",
            "React",
            "Libraries",
        ],
   },
]

这意味着第一个对象属于assets/icons，第二个属于assets/fonts，第三个属于programming/javascript/docs ，依此类推。

我正在尝试将其映射到树状视图，其中兄弟姐妹应该在同一个父级下，例如：

const data = [
    {
        name: 'Assets',
        id: 'assets',
        children: [
            {
                name: 'Icons',
                id: 'assets/icons',
            },
            {
                name: 'Illustrations',
                id: 'assets/illustrations',
            },
        ],
    },
    {
        name: 'Programming',
        id: 'programming',
        children: [
            {
                name: 'JavaScript',
                id: 'programming/javascript',
                children: [
                    {
                        name: 'Docs',
                        id: 'programming/javascript/docs',
                    },
                    {
                        name: 'React',
                        id: 'programming/javascript/react',
                        children: [
                            {
                                name: 'Libraries',
                                id: 'programming/javascript/react/libraries',
                            },
                        ],
                    },
                ],
            },
        ],
    },
]

我想从右边穿过会更容易，也许用reduceRight()，但我似乎无法做到正确。

任何人都知道如何实现这一目标？

谢谢！

标签： javascript

Answer 1

您可以结合使用forEach和reduce并基于parentsList数组创建嵌套层次结构。

const data = [{"parentsList":["Assets","Icons"]},{"parentsList":["Assets","Fonts"]},{"parentsList":["Programming","JavaScript","Docs"]},{"parentsList":["Programming","JavaScript","React","Libraries"]}]

const result = []

data.forEach(function({ parentsList, ...rest }) {
  let id = '';

  parentsList.reduce((r, name, i) => {
    id += (id.length ? '/' : '') + name.toLowerCase();

    if (!r[name]) {
      const value = { id, name }
      r[name] = {result: []}

      if (i != parentsList.length - 1) {
        value.children = r[name].result
      } else {
        Object.assign(value, rest)
      }

      r.result.push(value)
    }

    return r[name]
  }, this)

}, {result})

console.log(result)