[jQuery]반복문 each 문 break, continue 사용방법과 예제

오늘은 jQuery를 사용해서 배열을 관리 할때 사용하는 each 함수에 대해 알아보겠습니다. each() 함수는 매개변수로 받은 배열의 요소나 Map 또는 객체의 속성을 반복할 수 있도록 하는 함수 입니다. 기본적인 javascript의 for문과의 차이점은 for문에는 조건식에 배열의 length만큼의 범위 지정을 하여 증감식을 써주어야 하는데에 반해 each()는 이러한 조건을 써주지 않아도 되기 때문에 가독성이 좋고, 배열 뿐만 아니라 DOM 객체나 일반 객체 등에도 사용이 가능하다는 점이 있습니다.

$.each() - 선택한 요소 각각에 대하여 for문 처럼 요소들을 반복 수행 하는 함수

each() 함수는 다음과 같은 두 가지 타입으로 사용할 수 있습니다.

// jQuery 유틸리티 메서드 
$.each(object, function(index, item){ }); 

// jQuery 일반 메서드 
$(selector).each(function(index, item){ })

위의 메서드를 차례로 알아보도록 하겠습니다.

$.each()

$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 반복 함수입니다. 즉, length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다. 첫 번째 매개변수는 배열이나 객체를 받습니다.

그리고 두번째 매개변수는 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖습니다.

 

다음의 예제를 통해 살펴보도록 합니다.

var arr= [ 
	{name : '현아', age : 26}, 
   	{name : '미나', age : 27} 
]; 

$.each(arr, function (index, item) { 
// index : 배열의 인덱스 또는 객체의 키 의미 
// item  : 해당 인덱스나 키가 가진 값을 의미합니다.
	console.log(item); 
});

 

 

다음의 예제는 배열대신 객체를 전달하는 경우입니다.

var obj = { 
	현아: 26, 
    	미나: 27 
}; 
$.each(obj, function (index, item) { 
// index : 객체의 key(property)
// item  : 키의 값
	console.log(index + " : " + item);
});

 

jQuery 의 반복문인 each 메서드에서는 for문에서의 break나 continue를 return 으로 처리한다.

for	jQuery
break	return false
continue	return true

예제 

let arr = new Array();
for(let i = 0; i < 5; i++){
  arr.push(i);
}
console.log(arr); //[0, 1, 2, 3, 4] 출력

 

 

$(arr).each(function(idx, item){
  console.log("return false : " + item);
  if(item == 2){
    return false;
  }
});

$(arr).each(function(idx, item){
  console.log("return true : " + item);
  if(item == 2){
    return true;
  }
});

$(arr).each(function(idx, item){
  console.log("return : " + item);
  if(item == 2){
    return;
  }
});

 

webclub.tistory.com/455

dololak.tistory.com/772