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

Question

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

它似乎通过第一个带有孩子的对象按预期工作，但是它没有达到第三层。

对象是这样的：

 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)

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

我可以很好地找到 Title 2，但如果我正在寻找 Title 3 或 4，该函数将不会迭代到数组中的第三个对象。我错过了什么？

标签： javascriptfor-of-loop

Answer 1

怎么了

为了理解循环停止的原因，让我们一步一步地写出发生了什么：

1. item取第一个对象的值。（标题 = 主页）。
2. if条件不满足且不item包含children
3. item取第二个对象的值。
4. if条件不满足但item包含children
5. 该函数返回函数调用的结果，lookUpTitle()因此循环停止。
6. 返回第 1 步，但使用第二个对象的子值。

因此，如果对象不满足if条件并包含，则循环将始终停止children。

如何修复它

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

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;
      }
    }
  }
};