간단한 예제를 사용하여 자바 스크립트로 Maps 소개 

이 기사에서는 실제 예제와 함께 자바 스크립트의 맵 개념에 대해 자세히 설명합니다. 

간단한 예를 들어 자바 스크립트로 Maps를 소개합니다.

자바 스크립트 객체를 사용할 때 발생하는 일부 문제를 해결하기 위해 Javascript ES6에지도 데이터 구조가 도입되었습니다.

https://cloudnweb.dev/2019/12/introduction-to-maps-in-javascript-with-a-simple-example/ 

Maps 란? 

맵은 자바 스크립트의 키 / 값 쌍 데이터 구조입니다. 맵은 모든 데이터 유형을 키로 포함 할 수 있다는 점을 제외하고는 자바 스크립트 객체와 유사합니다.

맵 키는 모든 데이터 유형이 될 수 있으며 문자열, 숫자 또는 객체 자체 일 수 있습니다.

객체와 맵 사이에도 다른 특성이 있습니다.

• 키 필드 – 키 필드는 모든 유형이 될 수 있습니다. 문자열, 숫자 또는 객체 또는 배열 일 수도 있습니다.
• 요소 순서 –지도 데이터 구조는 요소의 순서를 유지합니다.
• 인스턴스 – 기본적으로 Map은 객체의 인스턴스이고 object는 Map의 인스턴스가 아닙니다.

let data = new Map();

let val = {
  id : 1
}

console.log(data instanceof Object);

console.log(val instanceof Map);

결과는 다음과 같습니다.

자바 스크립트로 맵 만들기 

맵는 새로운 키워드를 사용하여 만들 수 있습니다.

let data = new Map();

이것은 변수 데이터에 저장된 맵의 초기화입니다.

맵에 아이템 추가하기 

기본적으로 값을 키로 설정하는 set() 메소드를 사용하여 Map에 항목을 추가 할 수 있습니다.

data.set(1,{ address : {
  country : "India",
  postal : 123456
} });
data.set(2,{ address : {
  country : "US",
  postal : 123456
} });

console.log(data);

따라서 키 1과 2를 사용하여 값을 데이터로 설정합니다.

키를 사용하여 항목 가져 오기 

지도 데이터 구조의 키를 사용하여 지도에서 값을 가져올 수 있습니다. Map은 키에서 값을 반환하는 get() 메소드를 사용합니다.

console.log(data.get(1));

console.log(data.get(2));

키를 사용하여 항목 삭제 

키를 사용하여 지도에서 항목을 삭제할 수 있습니다. delete()는 맵에서 항목을 삭제하는 데 사용되는 메소드입니다.

console.log(data.delete(2))
console.log(data)

모든 항목 삭제 

clear() 메소드를 사용하여 맵의 모든 항목을 삭제할 수 있습니다.

//deleting all items in the map
data.clear();

맵 키 반복 

map.keys()를 사용하여 맵의 모든 키를 반복 할 수 있습니다

//iterating over map keys
for (const k of data.keys()) {
  console.log(k)
}

맵 값 반복 

마찬가지로 map.values​​()를 사용하여 맵의 모든 값을 반복 할 수 있습니다.

//iterating over map values
for (const k of data.values()) {
  console.log(k)
}

따라서 다음과 같이 출력됩니다.

맵 키, 값 쌍 반복 

//iterating over map key,value pairs
for (const [k,v] of data) {
  console.log(k,v);
}

완전한 코드 

자바 스크립트의 WeakMaps 

WeakMap은 또한 가비지 콜렉션이 있다는 사실을 제외하고 맵입니다. 키가 참조를 잃으면 WeakMap의 특정 값이 가비지 수집됩니다.

개념을 이해하기 위한 예를 보도록 하겠습니다.

let user = {
  name : "Steve"
}

let weakMap = new WeakMap();
weakMap.set(user, "check");

user = null; // overwrite the reference

console.log(weakMap) //it will be removed from the memory

당신은 그것의 결과가 무엇인지 추측 할 수 있습니까?

여기, 기본적으로 weakmap의 핵심 인 사용자 변수가 있습니다. 사용자 변수를 null로 설정하면 weakMap이 키에 대한 참조를 잃었습니다.

WeakMap에서 자동으로 가비지 수집됩니다.

요약 

요약하면, Javascript의 Maps 및 WeakMaps의 모든 개념입니다.