구조분해할당으로 간단한 리스트와 로또추첨박스 만들기

1) 리스트 만들기

1.구조분해 할당으로 list 명단을 작성하고,
2.createElement로 태그를 만들고 forEach로 구조분해 할당으로 각 객체 값을 뽑아내어 HTML에 표시

완성본

1.구조분해 할당으로 list 명단을 작성

  let list =[{id : 1, content : "list01", name : "lee1"},
             {id : 2, content : "list02", name : "lee2"},
             {id : 3, content : "list03", name : "lee3"},
             {id : 4, content : "list04", name : "lee4"},
             {id : 5, content : "list05", name : "lee5"}];

2.createElement로 태그를 만들고 forEach로 구조분해 할당으로 각 객체 값을 뽑아내어 HTML에 표시

  list.forEach(function(i){
       
        let _li = document.createElement("li");
        let _span1 = document.createElement("span");
        let _span2 = document.createElement("span");
        let _span3 = document.createElement("span");
        
        let {id, content, name} = i;
        _span1.innerHTML = "번호 : " + id+ "&nbsp" ;
        _span2.innerHTML = "내용 : " + content+ "&nbsp" ;
        _span3.innerHTML = "이름 : " + name+ "&nbsp";

        _li.append(_span1,_span2,_span3);
        document.querySelector(".list").append(_li);
    })

createElement로 태그 생성하고, let{id, content, name}= i; 구조분해 할당으로 i에 각 값을 넣고 forEach문을 통해 출력한다.

---

2) 로또추첨박스 만들기

1. 1~45개의 숫자를 배열에 집어넣고
2.로또 추첨 버튼 클릭시 중복되지않는 번호 6개 추첨

완성본

HTML

<div class ="lotto-box"> </div>
<button class ="lotto-btn">로또 추첨</button>
<div class ="lotto-box2"></div>

1. 1~45개의 숫자를 배열에 집어넣기

let lottoBtn = document.querySelector(".lotto-btn");
   let lottoNum =[];
   let lottoResult = [];

   function init(){
       for (let i = 1; i <= 45; i++) {
           lottoNum.push(i);
           let _div = document.createElement("div");
           _div.className = "item"+ i ;
           _div.innerHTML = i ;
           document.querySelector(".lotto-box").append(_div);
       }
   }
   init();

클래스명이 itemi인 div태그에 1~45 숫자가 배열에 들어간다.

2.로또 추첨 버튼 클릭시 중복되지않는 번호 6개 추첨

lottoBtn.addEventListener("click",function(){

        while(lottoResult.length < 6 )
        {
            let num = Math.floor(Math.random() * 45) + 1;

            if(lottoResult.indexOf(num)=== -1)
            {
                lottoResult.push(num);
                let lottoItem = document.querySelector(".item" + num);
                document.querySelector(".lotto-box2").append(lottoItem);
            }
        }
        let [text1,text2,text3,text4,text5,text6] = lottoResult ;
        console.log(text1,text2,text3,text4,text5,text6, "당첨번호");
    });

★ 중복 되지 않게 번호를 넣는 방법은 if(lottoResult.indexOf(num)=== -1)>에 있었다★
indexof는 배열안에 값이 있을때 해당 인덱스의 값을 반환하지만,
값이 없을 때는 -1을 반환하기 때문에 ===-1을 통해 값이 있는지 없는지를 확인후 -1이면 값이 없는것이기 때문에 당첨번호 배열안에 숫자를 넣는다.

구조분해할당 배열은 순서대로 변수의 명이 어떻든 상관없이 순서대로 할당 받는다.