web-dev-qa-db-ja.com

JSlint：予期しない「for」

私はラジオボタンでテストしてきました。 JS lintを実行するまで、すべてが問題ないようです。 1つを除くすべてのエラーを修正しました。

予期しない「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はコードが機能すると思っても問題をここで見るのでしょうか？私はループに関して最も問題があるので、ループに関するいくつかの洞察を実際に使用することができました。それらを使用しないように言われましたが、ループを実行してラジオボタンとチェックされたラジオを検出することに問題はありません。これは私が心配すべきことですか？

javascriptjslint
43
MrEhawk82

JSLintでは、forEachなどの他のループを使用することをお勧めします。 http://www.jslint.com/help.html#for

気になるのに、コードの見栄えが良い場合は、下の「forステートメント」オプションを選択できます。

57
Alex

これは私があなたのために見つけることができる最高の説明です 、

最近、私はもうforを使用する必要がないと決めました。 forループは完了しました。 forループが発明され、Fortranから出てきました。それらは配列を操作する方法を意図していましたが、ES5ではforEach()とmap()およびその他すべてを追加しました。私は 'そう、そうする方法です'。とにかくfor構文は、3つのステートメントを含むものとはとても奇妙です。

Crockfordはさらに、ES6でループコンストラクトをすべて使用し、代わりに機能コンストラクトのみを使用することについて説明します。

無視することもできます-forを許容するオプションをJSLintに渡すだけです。

しかし、持っている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>_
17
jdphenix