[es6]Array for of 배열 순회하기,펼침연산자로 배열 복사하기,유사배열을 배열로 바꿔주는 from() 메서드

이번포스트는 배열에 유용한 문법과 메서드를 알아보겠습니다.

for of

배열 순회하기

Array , Map , Set , String , TypeArray , Arguments 등 을 순회

es6에 새로 생긴 문법이에요.

es5에서 배열 순회하려면 for문 으로 돌리거나 foreach문을 썼었죠 하지만

더 간결해졌습니다.

	

let data = ['집가고싶다',100,null,'퇴근소취'];

for( let val of data){
   console.log(val)
}

of 뒤에 배열을 담은 변수를 놓고

of 앞에 배열의 값을 담을 변수를 만들어줍니다.

콘솔에 배열값이 순회된걸 확인하실 수 있습니다.

spread operator

펼침연산자로 배열 복사하기 ...

펼침연산자를 사용해 기존의 배열을 바꾸지않고 새로운 배열을 복사

스프레드 오퍼레이터를 번역하면 펼침 연산자 입니다. es6에서 펼침연산자는 ... 로 사용됩니다.

어떻게 이 연산자를 활용하여 배열을 복사하는지 확인해볼까요 ?

	

let data = ['집가고싶다',100,null,'퇴근소취'];
let newData = [200,...data];

console.log(newData)

새 변수에 담겨있는 배열에 펼침연산자를 사용하여 배열을 추가해주었습니다. 

이렇게 되면 새변수에 담겨있는 배열에 기존의 배열을 합쳐서 새로운 배열을 만들어낸것이죠!

Array.from()

유사배열을 진짜배열로 바꾸기

es5 에서 유사배열을 진짜배열로 만들기위해선 엄청 긴 코드가 필요했죠 Array.prototype.slice.call(arguments) 이런식으로요

es6에선 form() 메소드 하나로 가능합니다. 

from 을 번역하면 뭐겠습니까 ~로부터죠. 

~로부터 진짜 배열을 만든다. 이렇게 생각하시면 됩니다.

실습으로 한번 배워볼게요.

html로 li에 텍스트 작성 후 li를 변수에 넣어주겠습니다

nodelist는 유사배열이죠 ! 

	

<ul id="list">
   <li>돈가스</li>
   <li>제육볶음</li>
   <li>파인애플</li>
</ul>

	

const list = document.querySelectorAll('li'); 

배열 메소드인 filter() 함수를 사용하여 글자가 4개인것만 콘솔에 찍어보도록 하겠습니다.

지금 유사배열인 상태에서 filter함수를 사용하면 작동되지 않습니다

유사배열이니까요.

그래서 form() 메소드를 사용해서 진짜배열로 만들어준뒤

filter함수를 사용해볼게요

	

const arrList = Array.from(list)
const arrListText = arrList.filter(function(el){
   return el.textContent.length > 3
})
console.log(arrListText)

콘솔에 제육볶음,파인애플 li만 찍혔습니다.

유사배열을 진짜배열로 만들어줘야 할 경우가 종종 있는데

이때 사용하면 아주 유용하겠죠 ?!

그럼 전 다음 포스팅으로 돌아올게요!!!!