[jQuery] 제이쿼리 each(), foreach, for반복문 예제

[jQuery] 제이쿼리 each() 반복문에 대해서 알아보겠습니다.

반복문이란?

프로그래밍에서 아주 중요한 작업입니다. 특정작업을 반복하는 프로그래밍 문법이죠.

 

우리가 익히 알고 있는 for문

for(var i=0; i<array.legnthl;i++){

}

위의 코드는 너무나 익숙하다.

 

그럼 each()문을 써야하는 이유는 무엇일까 특징을 살펴보자?

1. 일반 for문보다 가독성이 좋다

2. 객체형을 다루기가 쉽다.

3. Array 객체에서 사용가능

4. 빠른편이다.

5. 리턴값을 받지 못한다.

 

foreach문의 특징이다.

1번, 2번만으로도 충분히 쓸만한 가치가 있다고 생각한다.

나는 each문을 알고나서부터는 반복문은 each문만 사용한다.

 

아래는 배열로 for문, forEach, $.each문을 돌린 예제이다.

var arr= [ 
			{name : '알리송', backnumber : '1'}
          , {name : '반다이크', backnumber : '4'} ];

//for문
for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].name);
  console.log(arr[i].backnumber);
  console.log(arr[i].name + arr[i].backnumber);
};


foreach문
arr.forEach (function (el, index) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});


$.each문
$.Each (arr, function (index, el) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});

 

 

요소로도 for문을 돌릴수 있습니다.

아래는 ul 태그 아래 li를 for문을 돌려볼게요.

<ul class="soccerList"> 
	<li>리버풀</li>
	<li>레알마드리드</li> 
	<li>AS로마</li> 
</ul>

<script type="text/javascript">
$('.soccerList li').each(function (index, item) {
     console.log(item);
});	
</script>


// 결과
// <li>리버풀</li>
// <li>레알마드리드</li>
// <li>AS로마</li>