在JavaScript/TypeScript中用递归查找对象属性值为何返回undefined？

问题场景 #

有如下菜单对象数组：

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"
                    }
                ]
            }
        ]
    }
]

需要递归查找title为"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" ))后，控制台输出undefined。

错误原因 #

1. 提前终止遍历：函数遍历到第一个元素（Menu 1）时，因它的title不是目标值但存在subMenu，会直接调用递归查找其子菜单。而递归查找Menu 1的子菜单未找到目标后返回undefined，此时整个函数直接返回，完全没机会遍历数组中的Menu 2和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;
    } else if (menu.subMenu) {
      // 先获取递归查找结果
      const result = findElement(menu.subMenu, title);
      // 找到目标才返回，否则继续遍历下一个元素
      if (result) {
        return result;
      }
    }
  }
  // 遍历完所有元素未找到，返回undefined
  return undefined;
};

调用修正后的函数，就能正确返回title为"Menu 3.1"的对象。

内容的提问来源于stack exchange，提问作者sonphung.xf