본문 바로가기
카테고리 없음

유사배열, 배열로 변환하기. (Spread문법)

by 임숙숙 2025. 5. 12.

nodelist 유사배열(배열이 아님)/ 배열을 끊어주는 슬라이스를 사용하려면 안됨, slide pop 등 사용 불가

 

-> spread문법을 사용하면 이를 배열로 바꾸어줌.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="fruits">
    <li>사과</li>
    <li>오렌지</li>
    <li>포도</li>
    <li>감귤</li>
  </ul>
  <P>
    NodeList는 배열처럼 생겼지만 배열이 아닙니다. <br>
    스프레드 문법을 사용하면 nodeList가 배열로 바뀐다.
    <br>
    배열로 바꾸어서 forEach, map 배열메서드 사용하기 위해서 사용한다.
  </P>
  <script>
    let listItems = document.querySelectorAll('#fruits li')
    console.log('NodeList 유사배열', listItems)
    let arr = [...listItems]
    //let 이름 = [...변수명] 으로 사용한다.
    console.log('스프레드 문법으로 변환함', arr)
    /*
    반복하는 값에 반복할 때마다 어떤 이름으로 붙여주느냐 ->()
    .forEach(function(item), index){
      실행코드
    })

    */
    arr.forEach(function(item, index){
      console.log(`${index}`, item)
    })
  </script>
</body>
</html>