JSlint: unexpected 'for'

Question

Tôi đã thử nghiệm với các nút radio. Mọi thứ có vẻ ổn cho đến khi tôi chạy nó qua JS lint. Tôi cố định tất cả các lỗi ngoại trừ một:

bất ngờ 'cho'

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

Đây là Javascript tôi:

/*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 chạy vòng lặp của tôi sai? tại sao JSlint lại thấy một vấn đề ở đây thậm chí nghĩ rằng mã hoạt động? Tôi thực sự có thể sử dụng một số thông tin chi tiết về vòng lặp, vì tôi có nhiều vấn đề nhất với họ. Tôi đã được yêu cầu không sử dụng chúng, nhưng tôi không thấy vấn đề với việc chạy một vòng lặp để phát hiện các nút radio và radio được kiểm tra. Đây có phải là điều tôi nên quan tâm không?

Answer 1

JSLint đề nghị bạn sử dụng vòng lặp khác như foreach. http://www.jslint.com/help.html#for

Bạn chỉ có thể chọn tùy chọn chịu đựng "cho tuyên bố" ở cuối nếu điều này làm phiền bạn nhưng mã trông vẫn ổn.

Answer 2

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

Gần đây tôi quyết định rằng tôi không cần phải sử dụng for nữa. Tôi đang thực hiện với các vòng for. for vòng được phát minh ra, họ ra khỏi Fortran. Chúng được dự định là một cách để làm việc thông qua một mảng, nhưng trong ES5 chúng tôi đã thêm forEach() và map() và tất cả những thứ khác, tôi giống như 'Yeah, đó là cách để làm điều đó'. Cú pháp for là rất kỳ lạ anyway với điều với ba phát biểu trong đó.

Crockford tiếp tục nói về việc được thực hiện với cấu trúc vòng lặp hoàn toàn trong ES6 và chỉ sử dụng cấu trúc chức năng thay thế.

Bạn có thể chọn bỏ qua nó - chỉ cần chuyển tùy chọn tới JSLint để chịu đựng for.

---

Tuy nhiên, giả sử bạn quyết định xóa bỏ vòng lặp for mà bạn có. Bạn có thể với every(). Nó sẽ là một cái gì đó như (không được thử nghiệm):

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

Đó là một cách trung thực nếu tôi hiểu điều này dễ hiểu hơn là vòng lặp for. Thành thật mà nói nó phụ thuộc vào tiêu chuẩn mã hóa cá nhân/dự án của riêng bạn.

---

Được cập nhật bằng đoạn mã hoạt động thể hiện every() để thực hiện việc này.

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>