从有序字符串数组及其在 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

我倾向于避免使用，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 2

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 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; }