foreach break_JS多层for循环break或continue到具体层

loop

场景

多层嵌套循环时候，需要控制指定层。

这个内容很早以前就入笔记了，但是一直很少用到，今天刚好碰到一个很复杂的数据结构，就把源码拿出来大家看一下，方便学习。

下面是生成器，不是最终代码哦……

---

关键源码

areas.forEach(area => { let topRow = area.topRow let seatRows = area.seatRows seatRows.forEach(seatRow => { out: for(let i = seatRow.start; i <= seatRow.end; i++) { if(seatRow.emptys) { let emptys = seatRow.emptys for(let j = 0; j < emptys.length; j++) { let empty = emptys[j] if(empty === i) continue out } } seats.push({ top: topRow, left: i, name: '', status: '', seat_type: '', }) } topRow++ })})

这里实现的是座位排布的核心逻辑层，当然可能还没优化好，主要说下主题嘛~

具体各个层级的代码部分截图如下：

生成器

生成器

各区域座位表

座位表

emptys 就是无座位的地方。

因为要做好自动渲染，所以里面穿插了许多辅助字段，让手工代码尽可能的小一点。

效果如下(目前)：

手机端效果

具体业务逻辑不做梳理，讲一下主题问题：

一、渲染每行是从左往右按照区域字段start与end来循环。

二、每行都有可能有一些空的座位，那么具体空的放到了一个数组emptys里面。

三、所以需要在循环里面在循环看一下是否是空的位置，如果是则进行后续操作，不把当前位置放进去。

out:for(let i = seatRow.start; i <= seatRow.end; i++) { if(seatRow.emptys) { let emptys = seatRow.emptys for(let j = 0; j < emptys.length; j++) { let empty = emptys[j] if(empty === i) continue out } } seats.push({ top: topRow, left: i, name: '', status: '', seat_type: '', })}

就是上面这个代码了。

标记就是第一行的那个out，注意带个冒号':'，然后到符合条件的地方使用continue out即可。

如果是break，那么就是break out，即跳出结束外层循环，不带就是结束当前层循环。

---

注意：仅对常规for循环有效，foreach等均无效。