如何在javascript（typescript）中使用遞回找到確切的屬性值？-有解無憂

假設我有這樣的物件回應

const response = [
    {
        "title": "Menu 1",
        "subMenu": [
            {
                "title": "Menu 1.2"
            }
        ]
    },
    {
        "title": "Menu 2",
    },
    {
        "title": "Menu 3",
        "subMenu": [
            {
                "title": "Menu 3.1",
                "subMenu": [
                    {
                        "title": "Menu 3.2"
                    }
                ]
            }
        ]
    },
    
]

我想使用遞回讓物件的標題為“Menu 3.1”，所以我撰寫了這個函式

const findElement = (arr, title) => {
  for (let index = 0; index < arr.length; index  ) {
    const menu = arr[index];
    if (menu.title === title) {
      return menu;
    } else if (menu.subMenu) {
      return findElement(menu.subMenu, title);
    }
  }
};

并這樣稱呼它

console.log(findElement(response, "Menu 3.1" ))

但它記錄“未定義”？我做錯了什么？

uj5u.com熱心網友回復：

問題是，代碼檢查 response[0]，它不匹配，所以檢查 responsep[0].submenu，但它回傳檢查結果，因此，for 回圈是短路的，因為目標沒有找到

檢查子選單時，您想要做的是檢查是否有結果，只有在有結果時才回傳

有點像這樣

const response = [{
        "title": "Menu 1",
        "subMenu": [{
                "title": "Menu 1.2"
            }
        ]
    }, {
        "title": "Menu 2",
    }, {
        "title": "Menu 3",
        "subMenu": [{
                "title": "Menu 3.1",
                "subMenu": [{
                        "title": "Menu 3.2"
                    }
                ]
            }
        ]
    },
]

const findElement = (arr, title) => {
    for (let index = 0; index < arr.length; index  ) {
        const menu = arr[index];
        if (menu.title === title) {
            return menu;
        } // no need for else since we return above
        if (menu.subMenu) {
            const sub = findElement(menu.subMenu, title);
            if (sub) return sub;
        }
    }
};

console.log(findElement(response, "Menu 3.1"))

uj5u.com熱心網友回復：

我肯定會在這里使用減速器：

const reducer = (result, item) =>
  result ||
  (item.title === "Menu 3.1"
    ? item
    : item.subMenu?.reduce(reducer, null) || null)

console.log(response.reduce(reducer, null))

顯示代碼片段

const response = [
  {
    title: "Menu 1",
    subMenu: [
      {
        title: "Menu 1.2"
      }
    ]
  },
  {
    title: "Menu 2"
  },
  {
    title: "Menu 3",
    subMenu: [
      {
        title: "Menu 3.1",
        subMenu: [
          {
            title: "Menu 3.2"
          }
        ]
      }
    ]
  }
]

const findItemByTitle = (items, title) => {
  const reducer = (result, item) =>
    result ||
    (item.title === title
      ? item
      : item.subMenu?.reduce(reducer, null) || null)

  return items.reduce(reducer, null)
}

console.log(findItemByTitle(response, "Menu 3.1"))

如果已經找到則回傳結果
如果標題匹配則回傳當前專案
如果專案有子選單，則回傳在當前專案的子選單上搜索專案（遞回）
else return null(=> 沒有結果就轉到下一項)

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/513468.html

標籤：javascript递归

上一篇：為什么在遞回使用函式時必須在函式前面加上return以獲得正確的輸出？

下一篇：遞回遍歷多維關聯陣列并創建關鍵路徑字串