从有序字符串数组及其在 JavaScript 中的关系创建父子树状对象数组
我有一个对象数组，其中每个对象都有一个属性 ( 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()，但我似乎无法做到正确。
任何人都知道如何实现这一目标？
慕婉清64621323回答
-
守着星空守着你
我倾向于避免使用，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); -
汪汪一只猫
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) -
MMMHUHU
使用嵌套对象作为哈希表的简短方法。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; }
随时随地看视频慕课网APP
相关分类
JavaScript