[JavaScript] array 반복문 함수 forEach로 저장된 데이터 갯수만큼 가져오기

반복문의 용도

1. 코드반복

2.array, object 데이터 전부 꺼낼 때

 

function -> arrow function 사용 가능

*주의 arrow function 쓰면 함수의 this 뜻이 달라질수있음

 

 

 

 

 

ex)

쇼핑몰에서 바지를 선택하면 거기에 맞는 바지 사이즈 옵션 열어줌

만약 바지사이즈가 매일 달라지면? 계속 바꾸기 너무 불편

서버에서 데이터 가져와서 그 데이터 갯수만큼 <option> 태그 만들면 됨

 

 

데이터가 array라면

array 함수 forEach 반복문

forEach : array 안에있는 데이터 갯수 만큼 반복

 

 

 

forEach(function(a){  

   실행할 코드

})

*a는 array에서 가져온 데이터들

 

var shirts = [95, 100, 105, 110];
var pants = [28, 30, 32, 34, 36]; 

$('.form-select').eq(0).on('input',function(){ //input : <input>값 변경될때 이벤트 작동
    var value = this.value;// this == e.currentTarget 현재 선택한 것
    if(value =='셔츠'){ 
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        shirts.forEach(function(a){ //forEach - array의 데이터 갯수만큼 반복 
            $('.form-select').eq(1).append(`<option>${a}</option>`); //a - array안의 데이터들
        })
    }else if(value=='바지'){ 
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        pants.forEach(function(a){  
            $('.form-select').eq(1).append(`<option>${a}</option>`);
        })
    }
    
})