배열 forEach Loop 하는 방법

forEach Loop

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원)

배열의 요소들을 반복하여 작업을 수행할수 있습니다.

 

var fruits = ["Apple", "Banana", "Orange", "Strawberry"];
fruits.forEach(function (item, index, array) {
    console.log(item, index);
});

//첫번쨰 인수는 배열의 각각의 item 
//두번쨰 인수는 배열의 index 
//세번째 인수는 배열 그자체

for .... in 반복문

객체의 key값과 value 값을 뽑아내는데 유용합니다.

 

var obj = { a: '가', b: '나', c: '다' }; 
for (var key in obj) { 
    console.log(key, obj[key]); 
 }

for ... of 반복문

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.

 

var iterable = [10, 20, 30]; 
for (var value of iterable) { 
    console.log(value); // 10, 20, 30 
}

for in 반복문과 for of 반복문의 차이점

for in 반복문 : 객체의 모든 열거 가능한 속성(property)에 대한 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {};// Object 프로퍼티에 객체 생성 
Array.prototype.arrCustom = function () {}; // array 프로퍼티에 객체 생성 

var iterable = [3, 5, 7]; 
iterable.foo = "hello"; 

for (var key in iterable) { 
    console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
} 

//기본 js 내장함수에 프로퍼티를 추가해서 프로퍼티까지 다뽑힌다 f

or (var value of iterable) { 
    console.log(value); // 3, 5, 7 
}

jQuery를 사용

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; 

$.each(json, function(key, value){
    alert('key:' + key + ' / ' + 'value:' + value);
});

 

each()메서드는 다음과 같은 두 가지 타입이 있다.

 

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

 

var arr = [
	{title : '다음', url : 'www.daum.net'},
	{title : '구글', url : 'www.google.net'}
];
    
$.each(arr, function(index, item){       
	var result = '';
	result += index + ' : ' + item.title + ' , ' + item.url;
	console.log(result);
});
    
- index : 배열의 인덱스 또는 객체의 키를 의미

- item : 해당 인덱스나 키가 가진 값.