对于数组完成之前的每个循环中断

Question

我有一个简单的函数查看数组中的 object。如果它没有找到基于属性的匹配项，它会检查它是否有 children，然后检查每个匹配项的属性值。

它似乎在第一个 object 和 children 中按预期工作，但它没有达到第三层。

object是这样的：

 data = [{
    title: 'Home',
    route: '/reports/home',
  },
  {
   title: 'Layer 2',
   children: [
     { title: 'Title 1', route: '/reports/title1' },
     { title: 'Title 2', route: '/reports/title2' },
   ],
  },
  {
    title: 'Layer 3',
    children: [
      { title: 'Title 3', route: '/reports/title3' },
      { title: 'Title 4', route: '/reports/title4' },
    ],
  }];


lookUpTitle = navGroup => {
  for (let item of navGroup) {
    if (item.route && item.route.toLowerCase() === '/reports/title3') {
      console.log(item.title)
      return item.title;
    } else {
      if (item.children) {
        return this.lookUpTitle(item.children);
      }
    }
  }
};
    
lookUpTitle(data)

我只是像上面那样调用函数并传入数组。

我可以很好地找到标题 2，但是如果我要查找标题 3 或 4，该函数将不会迭代到数组中的第三个 object。我错过了什么？

Answer 1

如果 for 循环遍历具有 children 的项目（如第二个那样），它将始终 return 一个值，退出 for 循环。

对于"else"子句，您需要检查lookUpTitle是否真的找到了想要的标题。如果是，return它，如果不是，继续for循环。

Answer 2

有问题，那是因为 return

         if (item.children) {
            //from here it will come out as its return 
             return this.lookUpTitle(item.children);
          }

像这样尝试

lookUpTitle = navGroup => {
      const title =[];
      for (let item of navGroup) {
        if (item.route && item.route.toLowerCase() === '/reports/title3') {
          console.log(item.title)
          return item.title;
        } else {
          if (item.children) {
            this.lookUpTitle(item.children);
          } else {
            console.log(item.title);
            return item.title;
          }
        }
      }
    };

Answer 3

发生了什么事

为了理解循环停止的原因，让我们一步步写下发生的事情：

item取第一个object的值。（标题 = 主页）。
不满足if条件，item不包含children
item取第二个的值object.
不满足if条件但item包含children
函数return是函数调用lookUpTitle()的结果，因此循环停止。
返回第 1 步，但使用第二个 object 的 children 值。

因此，如果 object 不满足 if 条件且包含 children.

，循环将始终停止

如何修复

为了修复它，我们必须跟踪递归结果。通过lookUpTitle()的递归调用，检查是否找到结果。如果没有，继续循环，如果找到了，就可以return了。此方法假定您只想要找到的第一个结果，而不是所有现有结果。

lookUpTitle = navGroup => {
  for (let item of navGroup) {
    if (item.route && item.route.toLowerCase() === '/reports/title3') {
      return item.title;
    } else {
      if (item.children) {
        var res = this.lookUpTitle(item.children);
        if(res != undefined)
          return res;
      }
    }
  }
};

对于数组完成之前的每个循环中断

for each loop breaking before array complete

javascript

for-of-loop