javascript - react - jshintrc

JSlint: inesperado ''para''

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Qué quiere decir JSLint con ''Expresión inesperada'' i ''en posición de enunciado''? 2 respuestas

He estado probando con botones de radio. Todo parece estar bien hasta que lo revisé con pelusa JS. Arregle todos los errores excepto uno:

Inesperado ''para''

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

Aquí está mi 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();
};
}());

¿Estoy ejecutando mal mi bucle? ¿Por qué JSlint vería un problema aquí incluso si el código funciona? Realmente podría usar algunos conocimientos sobre los bucles, ya que tengo la mayoría de los problemas con ellos. Me han dicho que no los use, pero no veo el problema de ejecutar un bucle para detectar botones de radio y radios marcadas. ¿Es algo que debería preocuparme?

Answer 1

JSLint sugiere que use otros bucles como forEach. http://www.jslint.com/help.html#for

Puede seleccionar la opción tolerar "para declaración" en la parte inferior si esto le molesta pero el código se ve bien.

Answer 2

Aquí está la mejor explicación que pude encontrar para ti ,

Recientemente decidí que no necesito usar más. Ya terminé con los bucles. for se inventaron bucles, salieron de Fortran. Pretendían ser una forma de trabajar a través de una matriz, pero en ES5 agregamos para forEach() y map() y todos los demás, estaba como ''Sí, esa es la forma de hacerlo''. La sintaxis for es tan extraña de todos modos con la cosa con las tres declaraciones.

Crockford continúa hablando sobre cómo hacer las construcciones de bucle por completo en ES6, y usar solo construcciones funcionales en su lugar.

Puede optar por ignorarlo, simplemente pase la opción a JSLint para tolerar.

Sin embargo, supongamos que decidió eliminar el bucle for que tiene. Podrías con every() . Sería algo así (no probado):

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");
    }
}

Es sinceramente discutible en mi opinión si esto es más fácil de entender que un bucle for . Honestamente, depende de sus propios estándares de codificación personal / proyecto.

Actualizado con un fragmento de trabajo que demuestra every() para lograr esto.

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>