본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[중요] Javascript

Javascript Map, 맵

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 27.

 

 

자바스크립트에서 Map 객체를 활용하여 데이터를 set, get 할 수 있는 방법이 es6문법편에서부터 자세히 소개 되어 있다.
해당 기능을 통해서 데이터를 나유롭게 가져 올 수 있고,
또한 반복문을 통해서 데이터를 출력 하는 것 도 가능 하다.

물론...배열에 json형식 데이터를 넣으면 맵처럼 사용 하기 쉽고 편하긴 하지만, 개인적으로 자바스크립트에서의 배열의 단점이 delete가 좀 귀찮고 delete된 객체가 비어버릴 경우 undefined나 null값이 들어가는 경우 때문에 이 Map을 활용 한 다면 조금 더 쉽게 key, value 형태로 객체를 다룰 수 있지 않을까 싶다.

var map = new Map();  //맵 객체 선언
map.set("param","data");  //key, value형태로 값을 넣는다.
map.set("param1","data");
map.set("param2","data");
map.delete("param");  //삭제!
//get을 통해 가져 올 수 있고, has를 통해 존재여부도 확인 가능!
console.log(`map data : ${map.get("param")},${map.get("param1")}, has : ${map.has("param1")} `);  

//반복문 활용 데이터 확인하기
for(let item of map.entries()) {
   console.log(item)
}

//아래 형태 처럼 객체를 생성 할 때 아에 생성자를 주입해서도 가능!
var map = new Map([[1,'1번'],[2,'2번'],[3,'3번']]); 
var iterator = map.values(); 
console.log(iterator.next());

개인적으로는 array보다 나은듯 하다..

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글