首頁猿問從有序字符串數組及其在...

從有序字符串數組及其在 JavaScript 中的關系創建父子樹狀對象數組

JavaScript

慕婉清6462132 2023-08-18 10:05:15

我有一個對象數組，其中每個對象都有一個屬性 ( 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()，但我似乎無法做到正確。任何人都知道如何實現這一目標？

查看完整描述

3 回答

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

我傾向于避免使用，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);

反對回復 2023-08-18

汪汪一只貓

TA貢獻1898條經驗獲得超8個贊

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)

反對回復 2023-08-18

MMMHUHU

TA貢獻1834條經驗獲得超8個贊

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

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

反對回復 2023-08-18

3 回答
0 關注
166 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從有序字符串數組及其在 JavaScript 中的關系創建父子樹狀對象數組

從有序字符串數組及其在 JavaScript 中的關系創建父子樹狀對象數組

3 回答

添加回答