javascript - 当内循环完成工作后停止外循环运行

Question

我想做的是当值匹配时向表单添加一个选中的复选框，否则添加一个标准的未选中的复选框。检查部分工作得很好，并且添加了选中的复选框，不幸的是，还添加了第二个未选中的复选框，导致重复条目。

我尝试在内部循环中将其设为 if else 语句，但这给出了奇怪的结果(对我来说)。所以我正在寻找一种方法来阻止外循环创建重复项。我正在使用 EJS 作为 Node.js。

<% for (var i = 0; i < sources.sources.length; i++) { %>
            <% for (var j = 0 ; j < source.length ; j++) {  %>
                <% if (source[j] == sources.sources[i].id)  { %>
                    <div class="checkbox-inline">
                        <label>
                          <input type="checkbox" name="source" value="<%=sources.sources[i].id%>" checked> <%=sources.sources[i].name%>
                        </label>
                    </div>
                <% } %> 
            <% } %> 
                    <div class="checkbox-inline">
                        <label>
                          <input type="checkbox" name="source" value="<%=sources.sources[i].id%>" > <%=sources.sources[i].name%>
                        </label>
                    </div> 
<% } %>    

Answer 1

在我看来，如果我正确理解你的代码，就不需要内部循环(不知道 ejs 是什么，但这对我来说看起来完全像一个 lodash 模板)。让您的模板看起来像这样不是更有意义吗:

<% for (var i = 0; i < sources.sources.length; i++) { %>
    <div class="checkbox-inline">
        <label>
          <input 
              type="checkbox" name="source" value="<%=sources.sources[i].id%>" 
              <% if (source.indexOf(sources.sources[i].id) !== -1) { %>  checked <% } %>
          > <%=sources.sources[i].name%>
        </label>
    </div> 
<% } %>

重复次数少得多，可读性更好，并且 indexOf 检查必须(可能)比 for 循环更快。