我想在遞回陣列中找到某個專案的父項
{
"uuid": "707a5ffd-68e2-4dbd-b539-128512ba3a0a",
"type": "page",
"items": [
{
"uuid": "9d823429-cc24-444d-a21c-a81357305851",
"title": "1",
"type": "question",
},
{
"type": "section",
"title": "2",
"uuid": "346dec94-124c-4932-bd40-af9dc68f1d27",
"items": [
{
"uuid": "bf0a9ab9-99cc-4833-b3d3-84a97072e85f",
"title": "2.1",
"type": "question",
}
],
},
{
"type": "section",
"title": "3",
"uuid": "4964096d-0de9-4ab1-ace5-e42516d6b866",
"items": [
{
"uuid": "b2170580-1e2e-4fb4-a7b9-a56b79db21b3",
"title": "3.1",
"type": "question",
}
],
}
],
"params": {
"collapsed": false
}
}
到目前為止我已經嘗試過：
export const findItemParent = (items, id, parent = null) => {
if (parent && parent.id === id) {
return parent;
}
for (const item of items) {
if (Object.prototype.hasOwnProperty.call(item, 'items')) {
return findItemParent(item.items, id, item);
}
}
return parent;
};
然后我打電話給findItemParent：
const data = [{...}]; // the data of the first snipet
// b2170580-1e2e-4fb4-a7b9-a56b79db21b3 -> item with title 3.1
const parent = findItemParent(data, "b2170580-1e2e-4fb4-a7b9-a56b79db21b3");
每當我運行此代碼時，我都會得到父級為2.
沙盒
在上面的例子中，我傳遞了帶有標題的專案的 id，3.1所以從邏輯上講，父項是3. 給定ID，如何獲取任何專案的父項？
uj5u.com熱心網友回復：
使用遞回，這就是我想出的。
引數items，我會說有點誤導，我會使用像 root 這樣的東西。
const findItemParent = (root, id, parent = null) => {
if (root.uuid === id) return parent;
if ('items' in root) {
for (const i of root.items) {
const r = findItemParent(i, id, root);
if (r) return r;
}
}
return null;
};
const data = {
"uuid": "707a5ffd-68e2-4dbd-b539-128512ba3a0a",
"type": "page",
"items": [
{
"uuid": "9d823429-cc24-444d-a21c-a81357305851",
"title": "1",
"type": "question",
},
{
"type": "section",
"title": "2",
"uuid": "346dec94-124c-4932-bd40-af9dc68f1d27",
"items": [
{
"uuid": "bf0a9ab9-99cc-4833-b3d3-84a97072e85f",
"title": "2.1",
"type": "question",
}
],
},
{
"type": "section",
"title": "3",
"uuid": "4964096d-0de9-4ab1-ace5-e42516d6b866",
"items": [
{
"uuid": "b2170580-1e2e-4fb4-a7b9-a56b79db21b3",
"title": "3.1",
"type": "question",
}
],
}
],
"params": {
"collapsed": false
}
};
const findItemParent = (root, id, parent = null) => {
if (root.uuid === id) return parent;
if ('items' in root) {
for (const i of root.items) {
const r = findItemParent(i, id, root);
if (r) return r;
}
}
return null;
};
const parent = findItemParent(data, "b2170580-1e2e-4fb4-a7b9-a56b79db21b3");
if (parent) console.log(parent.title, parent.type, parent.uuid);uj5u.com熱心網友回復：
const findParent = (currentObject, id, parent = null) => {
// If its found return its parent
if (currentObject.uuid === id) return parent;
// Iterate through sub items
for (const item of (currentObject.items) || []) {
// If found return it
const found = findParent(item, id, currentObject);
if (found) return found;
}
// If not found return null;
return null;
};
findParent(el, "346dec94-124c-4932-bd40-af9dc68f1d27");
uj5u.com熱心網友回復：
我會制作一張地圖，您可以在其中參考樹中的父級。如果您有很多查找，這會很有幫助。
const book = {
"uuid": "707a5ffd-68e2-4dbd-b539-128512ba3a0a",
"type": "page",
"items": [
{
"uuid": "9d823429-cc24-444d-a21c-a81357305851",
"title": "1",
"type": "question",
},
{
"type": "section",
"title": "2",
"uuid": "346dec94-124c-4932-bd40-af9dc68f1d27",
"items": [
{
"uuid": "bf0a9ab9-99cc-4833-b3d3-84a97072e85f",
"title": "2.1",
"type": "question",
}
],
},
{
"type": "section",
"title": "3",
"uuid": "4964096d-0de9-4ab1-ace5-e42516d6b866",
"items": [
{
"uuid": "b2170580-1e2e-4fb4-a7b9-a56b79db21b3",
"title": "3.1",
"type": "question",
}
],
}
],
"params": {
"collapsed": false
}
};
function walkTree(group, parentRef, titleMapping) {
titleMapping = titleMapping || {};
group.items.forEach(function (item) {
titleMapping[item.title] = { ...item, parentRef };
if (item.items) walkTree(item, titleMapping[item.title], titleMapping);
});
return titleMapping;
}
const titleMapping = walkTree(book);
console.log(titleMapping["3.1"].parentRef.title);另一種選擇是使用遞回查找，您可以在其中查看專案是否包含標題。
uj5u.com熱心網友回復：
您可以使用遞回函式迭代每個專案的專案。
const data = {
"uuid": "707a5ffd-68e2-4dbd-b539-128512ba3a0a",
"type": "page",
"items": [
{
"uuid": "9d823429-cc24-444d-a21c-a81357305851",
"title": "1",
"type": "question",
},
{
"type": "section",
"title": "2",
"uuid": "346dec94-124c-4932-bd40-af9dc68f1d27",
"items": [
{
"uuid": "bf0a9ab9-99cc-4833-b3d3-84a97072e85f",
"title": "2.1",
"type": "question",
}
],
},
{
"type": "section",
"title": "3",
"uuid": "4964096d-0de9-4ab1-ace5-e42516d6b866",
"items": [
{
"uuid": "b2170580-1e2e-4fb4-a7b9-a56b79db21b3",
"title": "3.1",
"type": "question",
}
],
}
],
"params": {
"collapsed": false
}
};
function findItemParent(items, id, parent = null) {
if (items.find(item => item.uuid === id)) return { uuid: parent?.uuid, type: parent?.type, title: parent?.title };
for (const item of items) {
let p;
if (item.type === 'section') {
p = findItemParent(item.items, id, item);
}
if (p) return p;
}
}
console.log(findItemParent(data.items, "b2170580-1e2e-4fb4-a7b9-a56b79db21b3"));轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346420.html
標籤：javascript 数组 递归
上一篇：重新加載后Vue3物件回傳未定義