我有一個嵌套的物件陣列：
const nestArray = [
{
title: "title 1",
children: [
{
title: "title 1-1",
children: [
{ title: "title 1-1-1", children: [...] },
{ title: "title 1-1-2", children: [...] }
]
},
{
title: "title 1-2",
children: [
{ title: "title 1-2-1", children: [...] },
{ title: "title 1-2-2", children: [...] }
]
},
]
},
{...},
{...}
]
所有物件都有相同的介面：
interface Obj {
title: string
children: Obj[]
}
我需要在每個名為keys. 將keys保留其所有子級的頭銜與其自己的頭銜。所以最終的結果應該是：
const nestArray = [
{
title: "title 1",
keys: ["title 1", "title 1-1", "title 1-1-1", "title 1-1-2"],
children: [
{
title: "title 1-1",
keys: ["title 1-1", "title 1-1-1", "title 1-1-2"],
children: [
{ title: "title 1-1-1", keys: ["title 1-1-1"], children: [] },
{ title: "title 1-1-2", keys: ["title 1-1-2"], children: [] }
]
},
{
title: "title 1-2",
keys: ["title 1-2", "title 1-2-1", "title 1-2-2"],
children: [
{ title: "title 1-2-1", keys: ["title 1-2-1"], children: [] },
{ title: "title 1-2-2", keys: ["title 1-2-2"], children: [] }
]
},
]
},
{...},
{...}
]
因此界面將更改為：
interface Obj {
title: string
children: Obj[]
keys: string[]
}
我搜索了很多，但在互聯網上找不到任何解決方案。我試圖自己解決這個問題，使用遞回函式，但我還是做不到。
使用 lodash 沒問題
到目前為止我已經嘗試過：
const mapTitlesToKeys = (obj) => {
obj.keys = [obj.title];
obj.children.forEach((childObj) => {
mapTitlesToKeys(childObj);
obj.keys.push(childObj.title);
});
};
nestArray.forEach((obj) => {
mapTitlesToKeys(obj);
});
console.log(nestArray);
結果是：
[
{
title: "title 1",
keys: ['title 1', 'title 1-1', 'title 1-2'], // <-- should be ["title 1", "title 1-1", "title 1-1-1", "title 1-1-2"]
children: [
{
title: "title 1-1",
keys: ['title 1-1', 'title 1-1-1', 'title 1-1-2'], // <-- should be ["title 1-1", "title 1-1-1", "title 1-1-2"]
children: [
{
title: "title 1-1-1",
keys: ["title 1-1-1"], // <-- fine
children: []
},
{
title: "title 1-1-2",
keys: ["title 1-1-2"], // <-- fine
children: []
}
]
},
{
title: "title 1-2",
keys: ['title 1-2', 'title 1-2-1', 'title 1-2-2'], // <-- should be ["title 1-2", "title 1-2-1", "title 1-2-2"]
children: [
{
title: "title 1-2-1",
keys: ["title 1-2-1"], // <-- fine
children: []
},
{
title: "title 1-2-2",
keys: ["title 1-2-2"], // <-- fine
children: []
}
]
},
]
},
{...},
{...}
]
uj5u.com熱心網友回復：
下面介紹的是實作預期目標的一種可能方式。
代碼片段
const addKeysTo = arr => (
arr.map(
({ title, children }) => {
const cArr = addKeysTo(children);
keys = [title, ...cArr.flatMap(({ keys }) => keys )];
return ({ title, keys, children: cArr });
}
)
);
/* explanation of the method
// method to add "keys" array to each elt
const addKeysTo = arr => (
// use ".map()" to iterate over given array
arr.map(
// destructure to access "title", "children"
({ title, children }) => {
// recurse to obtain updated childre-narray
const cArr = addKeysTo(children);
// construct "keys" array for current elt
keys = [title, ...cArr.flatMap(({ keys }) => keys )];
// explicit return of current elt of "arr" array with "keys" prop
return ({ title, keys, children: cArr });
}
) // implicit return from the method
);
*/
const nestArray = [{
title: "title 1",
children: [{
title: "title 1-1",
children: [{
title: "title 1-1-1",
children: []
},
{
title: "title 1-1-2",
children: []
}
]
},
{
title: "title 1-2",
children: [{
title: "title 1-2-1",
children: []
},
{
title: "title 1-2-2",
children: []
}
]
},
]
}];
console.log(
'added keys to nested-objects array...\n',
addKeysTo(nestArray)
);.as-console-wrapper { max-height: 100% !important; top: 0 }解釋
添加到上述代碼段的行內注釋。
uj5u.com熱心網友回復：
像這樣的東西？（較短的版本...無需保留舊版本）
const nestArray = [{
title: "title 1",
children: [{
title: "title 1-1",
children: [{
title: "title 1-1-1",
children: []
},
{
title: "title 1-1-2",
children: []
}
]
},
{
title: "title 1-2",
children: [{
title: "title 1-2-1",
children: []
},
{
title: "title 1-2-2",
children: []
}
]
},
]
}]
function add_keys_obj(obj) {
obj.keys = [obj.title];
obj.children.forEach(function(child) {
add_keys_obj(child)
obj.keys.push(...child.keys)
})
}
function add_keys(arr) {
arr.forEach(function(obj, key) {
add_keys_obj(obj);
})
return arr;
}
add_keys(nestArray)
document.querySelector("pre").innerText = JSON.stringify(nestArray, null, 2);<pre></pre>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/497761.html
標籤：javascript 数组 打字稿
上一篇：選擇無線電輸入時如何輸入值？