JSlint: 意外的 'for'

Question

我一直在测试单选按钮。一切都很正常，直到我将其通过JS Lint进行测试。我修复了除一个错误之外的所有错误：

意外的 'for'

for (i = 0; i < radios.length; i += 1) {

这是我的 Javascript 代码：

/*global body,window,document,alert*/
(function () {
"use strict";

var UIlogic;

UIlogic = {
    myLoad: function () {
        var elems, elemText, btn1, winter, summer, fall, spring, header, btns;

        winter = "<div><input type='radio' name='cb' id='cbA' value='0'/><label for='cbA'>Winter</label></div>";
        summer = "<div><input type='radio' name='cb' id='cbB' value='1'/><label for='cbB'>Summer</label></div>";
        fall = "<div><input type='radio' name='cb' id='cbC' value='2'/><label for='cbC'>Fall</label></div>";
        spring = "<div><input type='radio' name='cb' id='cbD' value='3'/><label for='cbD'>Spring</label></div>";

        header = "Header";

        btns = "<br /><button class='btns' id='btn1'>Go!</button>";

        elemText = "Menu/nav";

        elems = "<center><div>" + header + "</div></center>";//title
        elems += "<div>" + elemText + "</div></center>";//menu
        elems += "<div id='container'><br />";//container opens
        elems += "<div id='div1'>" + winter + "</div>";
        elems += "<div id='div2'>" + summer + "</div>";
        elems += "<div id='div2'>" + fall + "</div>";
        elems += "<div id='div2'>" + spring + "</div>";
        elems += "<div id='div3'>" + btns + "</div>";
        elems += "</div>";//container closes
        elems += "<h6><div id='footer'>Ehawk 2015</div></h6>";

        body.innerHTML = elems;
        btn1 = document.getElementById("btn1");
        btn1.addEventListener('click', UIlogic.intoFunction, false);

    },
    intoFunction: function () {
        var radios, found, i = 0;
        radios = document.getElementsByName("cb");
        found = 1;
        for (i = 0; i < radios.length; i += 1) {//issue occurs here
            if (radios[i].checked) {
                alert(radios[i].value);
                found = 0;
                break;
            }
        }
        if (found === 1) {
            alert("Please Select Radio");
        }
    }
};
window.onload = function () {
    UIlogic.myLoad();
};
}());

我循环的方式有问题吗？为什么JSlint会发现问题，即使代码能够正常工作？我真的需要一些关于循环的见解，因为我在这方面遇到了最大的问题。有人告诉我不要使用它们，但我不认为运行一个循环来检测单选按钮和已选中的单选按钮有什么问题。这是我应该关注的问题吗？

- MrEhawk82

---

您可以在选项中检查“Tolerate... for statement”以抑制此警告。 - Bill the Lizard

这是一个相关的问题，尽管标记为Java而不是JavaScript。 - zzzzBov

此处也有人提出了同样的问题（https://dev59.com/gorda4cB1Zd3GeqPSeea），尽管标题可能会误导。 - ruffin

Answer 1

JSLint建议您使用其他循环，例如forEach。http://www.jslint.com/help.html#for

如果这让您感到困扰，您可以仅选择底部的“容忍for语句”选项，但代码看起来很好。

- Alex

---

不错的发现。那就是我投票支持的“采纳答案”。 - garryp

这个建议有一个问题 - 你无法像原始的for循环一样在概念上中断 forEach()。在这种情况下，考虑使用every()。 - jdphenix

Answer 2

这是我能找到的最好的解释。

最近我决定不再使用for。我已经放弃了for循环。 for循环是由Fortran发明的。它们旨在成为一种处理数组的方法，但在ES5中，我们添加了forEach()和map()等函数，我认为那才是正确的方法。而且for语法也非常奇怪，有三个语句。

Crockford接着谈到在ES6中完全放弃循环结构，改用函数式结构。

你可以选择忽略它 - 只需向JSLint传递选项以容忍for。

---

然而，假设你决定放弃目前使用的for循环，你可以使用every()。代码大概是这样的（未经测试）：

intoFunction: function () {
    var radios, found; 
    radios = document.getElementsByName("cb");
    found = Array.prototype.slice.call(radios).every(function(radio) {
        if (radio.checked) { 
            alert(radio.value); 
            return false; 
        }
        return true; 
    }); 

    if (found) {
        alert("Please Select Radio");
    }
}

在我看来，这是否比使用for循环更易于理解，这是可以争论的。实际上，这取决于您个人或项目的编码标准。

---

更新了一个可工作的代码片段，演示如何使用every()实现此操作。

function into() {
  var radios, found;
  radios = document.getElementsByName("cb");
  found = Array.prototype.slice.call(radios).every(function(radio) {
    if (radio.checked) {
      alert(radio.value);
      return false;
    }
    return true;
  });

  if (found) {
    alert("Please Select Radio");
  }
}

jQuery("[name='cb']").on("click", into);
jQuery("button").on("click", function() {
  jQuery("[name='cb']").prop("checked", false);
  into();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label>
    <input type="radio" name="cb" value="M">Male</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="F">Female</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="I">I don't know</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="B">Both</label>
</p>
<p>
  <button>Clear Radios</button>

- jdphenix

---

刚看到你的编辑，我会尝试一下。谢谢！ - MrEhawk82

用“for”循环更容易理解。 - Bobort

@Bobort 我没有异议... - jdphenix