서로 다른 결과를 가진 JavaScript 배열을 반복하는 두 가지 방법

Question

자바 스크립트에서 루핑에 대한 질문이 있습니다. 주로 jQuery를 사용하지만 이제는 순수한 JavaScript로 쉬운 게임을 만들기로 결정했습니다.

이 방법으로 모든 'td'를 반복하면 cells[i]은 td 요소이며 이벤트를 첨부 할 수 있습니다. 내가 이렇게 할 경우

for(i = 0; i < cells.length; i++){ 
     if(cells[i].nodeName == 'TD') 
     { 
      cells[i].onclick = function(){ 
       // call funciton on onclick 
      }; 
     } 
    } 

는하지만, 각 요소는 인덱스 번호이며, 마지막에 두 사람은 length 및 item 있습니다.

for(var cell in cells){ 
     // cell is a number 
    } 

차이점은 무엇이며 왜 foreach-loop는 내가 원하는 것처럼 작동하지 않습니까?

Answer 1

cell은 cells HTMLCollection의 인덱스이기 때문에 숫자입니다. 두 번째 루프에서 당신과 같이 값을 사용하십시오 :

for(var cell in cells){ 
    if(cells[cell].nodeName == 'TD') 
    { 
     cells[cell].onclick = function(){ 
      GameTurnExecute(player); 
     }; 
    } 
} 

Answer 2

당신은 또한 말할 수 있습니다 :

for(var cell in cells){ 
    if(cells.hasOwnProperty(cell)) 
    { 
     cells[cell].onclick = function(){ 
      GameTurnExecute(player); 
     }; 
    } 
} 

프로토 타입 체인에서오고 속성을 볼 수 없습니다. (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)

사실, 당신은 자바 스크립트에서 for in을 거의 항상 사용하면 hasOwnProperty를 사용하고 싶습니다.