JavaScript의 지도

지도 데이터 구조는 ES6에서 도입되었습니다. 개체와 유사한 키-값 쌍 구문이 있습니다.

지도를 만드는 방법

키-값 쌍의 배열을 new Map 생성자에 전달하여 맵을 생성할 수 있습니다.

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

또는 set() 메서드를 사용하여 지도에 요소를 추가할 수 있습니다.

const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

지도와 객체의 차이점은 무엇입니까

객체와 동일하게 맵은 키, 값 쌍 요소를 저장합니다. 그러나 둘은 확연히 다르다.

특징
지도
사물

열쇠
맵 키는 모든 값이 될 수 있습니다. 여기에는 개체, 함수 또는 프리미티브가 포함됩니다.
엄밀히 말하면 객체 키는 문자열 또는 기호 데이터 유형이어야 합니다.

길이
지도에는 지도의 길이를 반환하는 크기 속성이 있습니다.
개체의 길이는 모든 요소를 ​​수동으로 반복하고 계산해야만 결정할 수 있습니다.

반복
직접 반복 가능
개체를 직접 반복할 수 없습니다. 그러나 다른 방법을 구현하여 그렇게 할 수 있습니다.

기본 키
맵에는 명시적으로 선언된 키만 포함됩니다. 따라서 기본 키를 포함하지 않습니다.
객체에는 프로토타입이 있으므로 다른 키와 충돌할 수 있는 기본 키를 포함합니다.

지도 작업

요소 추가

set() 메서드는 맵에 요소를 추가하는 데 사용됩니다. set 메소드는 새 요소의 키-값 쌍을 매개변수로 받습니다.

fruits.set("apples", 500);

요소 가져오기get() 메소드가 요소의 키 매개변수를 수신합니다.

fruits.get("apples") // outputs 50

요소 제거delete() 메서드는 지도에서 요소를 삭제합니다.

fruits.delete("apples")

지도 지우기clear() 메서드는 맵에서 모든 요소를 ​​제거합니다.

fruits.clear()

지도 횡단forEach() 목록의 항목에 순차적으로 액세스하는 데 사용할 수 있습니다.

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  fruits.forEach((key, value)=>{
    console.log(key, value)
  })
  /*
  output
  apples 500
  bananas 300
  oranges 200
  */

keys()는 반복 가능한 키 목록을 반환합니다. 마찬가지로 values()는 반복 가능한 값 목록을 반환합니다.

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.keys())
 /*outputs
 { 'apples', 'bananas', 'oranges' }
 */
console.log(fruits.values())
/*outputs
{ 500, 300, 200 }
*/

entries() 맵을 횡단하고 키-값 쌍의 배열을 반환합니다[key, values].

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.entries())

 /*
 {
  [ 'apples', 500 ],
  [ 'bananas', 300 ],
  [ 'oranges', 200 ]
}
 */

지도 크기 찾기size 속성이 지도의 길이를 반환합니다.

fruits.size //outputs 3

요약

객체와 지도는 상당히 유사해 보이지만 상당히 다릅니다. 맵에는 크기 속성이 있으며 키는 함수 및 객체를 포함한 모든 것이 될 수 있습니다.
객체에는 크기 속성이 없지만 키는 엄격하게 문자열이어야 합니다.