JS - ES6문법 반복문 for ...in, for ...of

for반복문은 자주 썼지만,, ES6에서 오브젝트나 어레이에 더 접근하기 쉬운 반복문이 추가됐다.

 

 

for ...in

var obj = { name : 'Kim', age : 30 }

for(var key in obj){
	console.log(obj[key]);
    console.log(key);
}

// 결과
// Kim
// 30
// name
// age

 

 

for ...in 은 enumerable(셀 수 있는) 자료만 사용 가능. 즉 object 자료형

 

클래스 객체라면 부모의 prototype도 반복해주는데 쓸데없기때문에

보통 hasOwnProperty(key) 를 사용해 걸러준다.

 

obj.name의 숨겨진 정보(writable, enumerable, configurable)를 출력해보고 싶으면

Object.getOwnPropertyDescriptor(obj, name) 을 통해 확인 가능하다.

    class parent {
    	//...생략
    }
    
    var obj = new 부모();
    
    obj = { name: 'Kim', age: 30 } 
    
    for( var key in obj){
       // obj가 순수 가지고 있는 값만 출력하고싶으면
       if(obj.hasOwnProperty(key)){
       		console.log(오브젝트[key]);
       }              
 	}

근데 성능상 forEach()함수가 좋다고 함ㅋ

 

 

 

for ...of

var arr = [10, 20, 30];

for (var value of arr) {
  console.log(value); // 10, 20, 30
}

for ...of는 Array, 문자, arguments, Map, Set, NodeList 등 iterable한 자료에 쓸 수 있다.

iterable한 자료는 arr[Symbol.iterator]() 로 확인가넝.

 

      let 어레이 = [1,2,3,4,5,6,7,8,9];

        // Array, 문자, arguments, Map, Set, NodeList 등 iterable한 자료
        for (var data of 어레이){
            if( data > 1){
                for(data2 of 어레이){
                    let multy = data * data2
                    console.log(`${data} x ${data2} = ${multy}`)
                }
            }
            
        }

간단하게 for ...of 반복문을 통한 구구단.

 

 

     var products = [
            {
                name1 : 'chair',
                price1 : 7000
            },
            {
                name2 : 'sofa',
                price : 5000
            },
            {
                name1 : 'desk',
                price3 : 7000
            },
        ]

        for(data of products){
            for(key in data){
                let newValue = data[key];
                var lastStr = key.substr(-1);
                if(!isNaN(lastStr)){
                    let newKey = key.slice(0, -1);
                    data[newKey] = newValue;
                    delete data[key];
                };
            }
        }

        console.log(products);

두개 스까서 배열안 객체의 key값을 통일시킨 코드.