递归函数如何返回正确值?

Question

有如下递归函数,无法返回正确的结果:

const navItems = [
      {
        name: 'name1',
        label: '人事管理',
        items: [
          {
            name: 'name2',
            label: '员工管理',
            items: [
              {
                name: 'name3',
                label: '员工管理-0',
                items: [
                  {
                    name: 'name4',
                    label: '员工管理-0-0',
                    items: '',
                  },
                  {
                    name: 'name5',
                    label: '员工管理-0-1',
                    items: '',
                  },
                ],
              },
              {
                name: 'name6',
                label: '员工管理-1',
                items: '',
              },
            ],
          },
          {
            name: 'name7',
            label: '部门管理',
            items: [
              {
                name: 'name8',
                label: '部门管理1',
                items: '',
              },
              {
                name: 'name9',
                label: '部门管理2',
                items: '',
              },
            ],
          },
          {
            name: 'name10',
            label: '职位管理',
            items: [
              {
                name: 'name11',
                label: '职位管理1',
                items: '',
              },
              {
                name: 'name12',
                label: '职位管理2',
                items: '',
              },
            ],
          },
        ],
      },
    ];

const navName = 'name12';    

const getSelectedLabel = (navItems, navName) => {
  let selectedLabel;
  const findSelectedLabel = (items, name) => {
    items.forEach((item) => {
      if (item.name === name) {
        selectedLabel = item.label;
      } else if (item.items && Array.isArray(item.items)) {
        findSelectedLabel(item.items, name);
      }
    });
  };
  findSelectedKey(navItems, navName);
  return selectedLabel;
};

想要通过递归函数,根据name值找到对应的label值,但是函数先返回了undefined,再执行到了赋值,应该怎么修改才对?
还有我本来写的是不要嵌套外层函数:

const findSelectedLabel = (items, name) => {
    items.forEach((item) => {
      if (item.name === name) {
        return item.label;
      } else if (item.items && Array.isArray(item.items)) {
        findSelectedLabel(item.items, name);
      }
    });
  };

findSelectedLabel(navItems, navName)

直接找到后返回这个值,但是也是不对的...虽然函数走到了return这句话,但并没有终止整个函数,最后返回的还是undefined.

很多人说运行结果是对的,那是因为刚好name4在第一层里,如果使用navName = name12,就不对了...
还有使用for循环也不对...使用for循环以后,它只递归第一层,只会一层层往里递归,而不会进入for循环...

谢谢各位大神~

Answer 1

forEach会把你的函数多封装一层，自然无法return

const findSelectedLabel = (items, name) => {
  for (let i = 0; i != items.length; ++i) {
    const item = items[i]
    if (item.name === name) {
      return item.label
    } else if (item.items && Array.isArray(item.items)) {
      const label = findSelectedLabel(item.items, name)
      if (label) {
        return label
      }
    }
  }
}

const label = findSelectedLabel(navItems, navName)
console.log(`find ${navName} -> ${label}`)

Answer 2

你的递归终止条件在哪里呢？

--------------------更新------------------------
请您先仔细了解一下forEach函数的用法，return不会终止这个函数的，223.

Answer 3

第一个版本我运行了一下，没有发现你说的问题，返回的就是预期结果，不是undefined：

第二个版本需要注意的点是forEach循环是不能提前退出的，所以如果循环有提前退出的需求，老老实实用for，另外递归调用的结果也需要return：

const findSelectedLabel = (items, name) => {
  for (let i = 0, len = items.length; i < len; i++) { // 使用for代替forEach
    let item = items[i]
    if (item.name === name) {
      return item.label;
    } else if (item.items && Array.isArray(item.items)) {
      let result = findSelectedLabel(item.items, name); // 递归的结果也要return
      if (result) return result
    }
  }
};