Javascript JSlint：意外的“for”

JSlint: unexpected 'for'

提问by MrEhawk82

I have been testing with radio buttons. Everything seems okay until i ran it through JS lint. I fixed all errors except one:

我一直在用单选按钮进行测试。一切似乎都很好，直到我通过 JS lint 运行它。我修复了除一个以外的所有错误：

Unexpected 'for'

出乎意料的“为”

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

Here is my Javascript:

这是我的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();
};
}());

Am i running my loop wrong? why would JSlint see a problem here even thought the code works? I could really use some insight on loops, as i have the most issues with them. I have been told not to use them, but i don't see the problem with running a loop to detect radio buttons and checked radios. Is this something i should be concerned with?

我运行我的循环错了吗？为什么 JSlint 会在这里看到问题，即使认为代码有效？我真的可以对循环使用一些见解，因为我对它们的问题最多。我被告知不要使用它们，但我没有看到运行循环来检测单选按钮和检查收音机的问题。这是我应该关心的事情吗？

回答by Alex

JSLint suggests you use other loops such as forEach. http://www.jslint.com/help.html#for

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

You can just select the tolerate "for statement" option at the bottom if this bothers you but the code looks fine.

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

回答by jdphenix

Here's the best explanation I could find for you,

这是我能为你找到的最好的解释，

Recently I decided I don't need to use foranymore. I'm done with forloops. forloops were invented, they came out of Fortran. They were intended to be a way of working through an array, but in ES5 we added forEach()and map()and all the others, I was like 'Yeah, that's the way to do it'. The forsyntax is so weird anyway with the thing with the three statements in it.

最近我决定我不再需要使用for了。我已经完成了for循环。for循环是发明的，它们来自 Fortran。它们旨在成为处理数组的一种方式，但在 ES5 中，我们添加了forEach()以及map()其他所有方式，我想“是的，这就是这样做的方式”。for无论如何，包含三个语句的东西的语法是如此奇怪。

Crockford further goes on to talk about being done with loop constructs altogether in ES6, and using just functional constructs instead.

Crockford 进一步谈到在 ES6 中完全使用循环结构，而只使用函数结构。

You can choose to ignore it - just pass the option to JSLint to tolerate for.

您可以选择忽略它 - 只需将选项传递给 JSLint 即可容忍for。

---

---

However, let's say you decided to do away with the forloop you have. You could with every(). It would be something like (not tested):

但是，假设您决定取消现有的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");
    }
}

It is honestly arguable in my opinion if this is easier to understand that a forloop. Honestly it depends upon your own personal / project's coding standards.

如果这更容易理解for循环，我认为老实说这是有争议的。老实说，这取决于您自己的个人/项目的编码标准。

---

---

Updated with a working snippet demonstrating every()to accomplish this.

更新了一个工作片段，演示了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>