從有序的字符串數組創建父子樹狀對象數組及其在 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() ，但我似乎無法正確完成。

任何人都知道如何實現這一目標？

謝謝！

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)

Answer 2

我傾向於避免使用reduce因為我發現很難閱讀包含reduce的代碼。 所以，這是一個non-reduce方式。

 const data = [ { parentsList: [ "Assets", "Icons" ], }, { parentsList: [ "Assets", "Fonts" ], }, { parentsList: [ "Programming", "JavaScript", "Docs" ], }, { parentsList: [ "Programming", "JavaScript", "React", "Libraries", ], }, ]; const processedData = []; for (const item of data) { const parents = [...item.parentsList].reverse(); let children = processedData; const ids = []; while (parents.length > 0) { const parent = parents.pop(); ids.push(parent.toLowerCase()); let foundParent = false; for (const child of children) { if (child.name === parent) { children = child.children; foundParent = true; break; } } if (!foundParent) { const newChild = {name: parent, id: ids.join("/"), children: [],}; children.push(newChild); children = newChild.children; } } } console.log(processedData);

Answer 3

使用嵌套對象作為哈希表的一種簡短方法。

 const data = [{ parentsList: ["Assets", "Icons"] }, { parentsList: ["Assets", "Fonts"] }, { parentsList: ["Programming", "JavaScript", "Docs"] }, { parentsList: ["Programming", "JavaScript", "React", "Libraries"] }], tree = data.reduce((t, { parentsList }) => { parentsList.reduce((r, name, i, a) => { const id = a.slice(0, i + 1).join('/').toLowerCase(); if (!r[name]) { r[name] = { _: { name, id } }; (r._.children ??= []).push(r[name]._); } return r[name]; }, t); return t; }, { _: {} })._.children; console.log(tree);

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