08. JS 배열

🔅 배열 Array

• 값이 저장되기 전까지 자료형이 지정되지 않음
• 자료형 제한 X
• 길이 제한 X
  ==> Java의 Collection List와 비슷

☑️ JS 배열 선언 방법

1. const arr1 = new Array(); // 0칸 짜리 배열 생성
2. const arr2 = []; // 0칸 짜리 배열 생성
3. const arr3 = new Array(3); // 3칸 짜리 배열 생성
4. const arr4 = ['사과', '딸기', '바나나']; // 3칸짜리 초기화된 배열 생성

☑️ 배열 관련 함수

(Stack 구조 관련 함수)

• push() : 배열 마지막 요소로 추가

• pop() : 배열 마지막 요소를 꺼내옴

• 배열.indexOf("값") : 일치하는 값을 가진 요소의 index 반환, 없으면 -1 반환

• 배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순으로 정렬(문자열) 단, [정렬 기준 함수]가 작성되면 정렬 결과가 달라짐
  -> 원본 배열의 순서를 정렬하기 때문에 원본이 훼손됨! 그러므로 깊은 복사 후 이용!

// 오름차순
numArr.sort(function (a, b) {
      return a - b;
    })
// 내림차순
numArr.sort(function (a, b) {
      return b - a;
    })

• 배열.toString() : 배열 요소를 하나의 문자열로 출력 -> 요소 사이에 "," 추가
• 배열.join("구분자") : 배열 요소를 하나의 문자열로 출력 -> 요소 사이에 "구분자" 추가

☑️ 일반 for문 - 배열, 컬렉션

for(let i = 0; i < arr.length; i++){
 	console.log(arr[i]); 
}

☑️ forEach - 배열

배열.forEach(function(item,index){반복수행 코드})

• item : 현재 접근 중인 요소
• index : 현재 인덱스

arr.forEach(function(a, i){
  	console.log(i + " : " + a);
}

** 여러 요소를 얻어온 경우(HTMLCollection, NodeList)는 배열이 아니므로 forEach()문을 쓸 수 없다!!!

☑️ for ( of ) - 배열, 컬렉션

for(item of 배열(또는 컬렉션)){}
-> Java의 향상된 for문과 비슷

for(let item of arr){
  console.log(item);

const list1 = document.getElementsByTagName("li"); //HTMLCollection
const list2 = document.querySelectorAll("#test > li") //NodeList
// 배열 X / forEach문 X, for of문 O

let sum = 0;
for(let item of list2){
	sum += Number(item.innerText);
}
console.log(sum);                      

☑️ for(let key in 객체) - JS객체용 for문

-- 예제 없음

☑️ 로또 번호 생성기

document.getElementById("btn4").addEventListener("click", function () {
  // 1 ~ 45 난수
  const lotto = []; // 빈 배열

  while (lotto.length < 6) {
    // 배열 요소가 6개 미만이면 반복

    const ran = Math.floor(Math.random() * 45 + 1); // 1~45 난수

    // 중복검사
    if (lotto.indexOf(ran) == -1) {
      // 배열에 난수값이 없다면
      lotto.push(ran);
    }
  }

  lotto.sort(function (a, b) {
    return a - b;
  }); // 오름차순 정렬
  console.log("로또번호 : " + lotto);
});