[Javascript] ES6 배열 메소드 : Array.from()

 

오늘은 자바스크립트 ES6에 추가된 배열 메서드

Array.from()에 대해서 알아보자! 

🦖🦕 ...

 

---

우선 쉽게 예제로 바로 들어가 보자.

 

우연히 모던 자바스크립트 강의를 보다가 풀게 된 문제인데

내용은 아래와 같다.

 

html 내부에 ul 태그를 살펴보면 문자열을 가진 li 요소들이 있다.

요소들을 자바스크립트 코드로
"e"를 포함한 요소들만 배열로 리턴하는 함수를 만들어라!
(Array.from(), filter(), includes()를 사용!)

 

 

이걸 보시는 분이 계시다면,,,,

한 번 풀어보길 추천한다,,,,! ✳︎

 

 

 

let lists = document.querySelectorAll("li")으로 li 모두를 가져오게 되면 

lists는 우리가 생각하는 배열이 아닌 NodeList라고 하는 유사 배열이다.

 

그렇기 때문에 filter()를 사용하게 되면 'Uncaught TypeError'가 난다.

그래서 Array.from()으로 배열로 바꿔주는 과정을 거쳐야 한다.

 

그리고 요소 자체는 문자열이 아닌 <li> 엘리먼트 자체이기 때문에 !

includes("e") 통해 문자열 확인을 위해서는

innerHTML, innerText 혹은 textContent를 사용하면 된다!

 

나는 마지막으로 문자열만 배열로 리턴하기 위해 map()까지 사용했는데

문제에서는 그럴 필요까지는 없었던 것 같다 ㅎㅎㅎㅎㅎ

 

+)

사이 공백이 많은 문자열을 가져오는 경우

 

innerText -> 불필요한 공백이 제거

textContent -> 그대로 !

 

 

 

 

 

---

Array.from() - JavaScript | MDN

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***