GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||
GeezerVison is showing developer.mozilla.org — Map - JavaScript | MDN This page was translated from English by the community. Learn more and join the MDN Web Docs community.
Map
|
| Map | Object | |
|---|---|---|
| 우발적 키 |
Map는 기본적으로 키를 포함하지 않습니다. 여기에는 명시적으로 입력된 내용만 포함됩니다.
|
참고:
이는 |
| 보안 |
Map은 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 수 있습니다.
|
사용자가 제공한 키-값 쌍을 |
| 키 유형 |
Map의 키는 모든 값(함수, 객체 또는 원시값 포함)이 될 수 있습니다.
|
Object의 키는 String 또는 Symbol이여야 합니다.
|
| 키 순서 |
|
일반적인
순서는 ECMAScript 2015에서만 자체 속성에 대해 처음 정의되었습니다.
ECMAScript 2020은 상속된 속성의 순서도 정의합니다.
OrdinaryOwnPropertyKeys
와
EnumerateObjectProperties
추상 명세작업을 참고하시기 바랍니다. 그러나 객체의 모든 속성을 반복하는 단일 메커니즘은 없습니다. 다양한 메커니즘에는 각각 다른 속성 하위 집합이 포함됩니다
( |
크기 |
Map의 아이템의 수는 size 속성에서 쉽게 가져올 수 있습니다.
|
Object의 아이템 수는 수동으로 결정해야 합니다.
|
| 순회 |
Map은
순회가능(iterable)하기 때문에 이므로 직접 반복할 수 있습니다.
|
참고:
|
| 성능 |
키-값 쌍의 빈번한 추가 및 제거와 관련된 상황에서는 성능이 좀 더 좋습니다. |
키-값 쌍의 빈번한 추가 및 제거에 최적화되지 않았습니다. |
| Serialization and parsing |
직렬화 또는 구문 분석에 대한 기본 지원이 없습니다.
(하지만 |
|
객체 속성 설정은 Map 객체에서도 작동하지만 상당한 혼란을 야기할 수 있습니다.
따라서 이는 다음과 같은 방식으로 동작하는 것처럼 보입니다.
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
그러나 속성을 설정하는 방법은 Map 데이터 구조와 상호 작용하지 않습니다. 속성 설정은 일반 객체의 기능을 사용합니다. 'bla' 값은 질의를 위한 Map에 저장되지 않습니다. 데이터에 대한 다른 작업도 아래와 같이 실패합니다.
wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
맵에 데이터를 저장하는 올바른 방법은 set(key, value) 메서드를 사용하는 것입니다.
const contacts = new Map();
contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });
contacts.has("Jessie"); // true
contacts.get("Hilary"); // undefined
contacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });
contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete("Raymond"); // false
contacts.delete("Jessie"); // true
console.log(contacts.size); // 1
Map()새로운 Map 객체를 생성합니다.
get Map[@@species]파생 객체를 만드는 데 사용되는 생성자 함수입니다.
Map.prototype[@@toStringTag]@@toStringTag
속성의 초기 값은 문자열 "Map"입니다. 이 속성은 Object.prototype.toString()에서
사용합니다.
Map.prototype.sizeMap 객체의 키/값 쌍의 숫자를 반환합니다.
Map.prototype.clear()Map 객체에서 모든 키-값 쌍을 제거합니다.
Map.prototype.delete()Map 객체에 해당 요소가 존재하며 삭제되었을 경우 true를 반환하며 해당 요소가 존재하지 않는 경우 false를
반환합니다. 이 이후에 map.has(key)를 실행하면 false를 반환할 것입니다.
Map.prototype.get()주어진 키에 해당하는 값을 반환하거나 값이 없다면 undefined을 반환합니다.
Map.prototype.has()주어진 키에 연관된 값이 Map 객체에 존재하는지 여부를 불리언 값으로 반환합니다.
Map.prototype.set()Map객체에서 전달된 키의 값을 설정합니다. Map객체를 반환합니다.
Map.prototype[@@iterator]()Map 객체에 삽입된 순서에 따라 [key, value] 두 개의 멤버 배열을 포함하는 새로운 반복자를 반환합니다.
Map.prototype.keys()Map 객체에 삽입된 순서에 따라 각 요소의 키를 포함하는 새로운 반복자를 반환합니다.
Map.prototype.values()Map 객체에 삽입된 순서에 따라 각 요소의 값을 포함하는 새로운 반복자를 반환합니다.
Map.prototype.entries()Map 객체에 삽입된 순서에 따라 [key, value] 두 개의 멤버 배열을 포함하는 새로운 반복자를 반환합니다.
Map.prototype.forEach()Map객체에 존재하는 각 키-값 쌍에 대해 삽입 순서대로 callbackFn을 한 번씩 호출 합니다. 만약
forEach호출 시 thisArg 매개변수가 있다면 각 콜백의 this 값으로 사용됩니다.
const myMap = new Map();
const keyString = "a string";
const keyObj = {};
const keyFunc = function () {};
// 값 설정
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");
console.log(myMap.size); // 3
// 값 불러오기
console.log(myMap.get(keyString)); // "value associated with 'a string'"
console.log(myMap.get(keyObj)); // "value associated with keyObj"
console.log(myMap.get(keyFunc)); // "value associated with keyFunc"
console.log(myMap.get("a string")); // "value associated with 'a string'", 왜냐하면 keyString === 'a string'
console.log(myMap.get({})); // undefined, 왜냐하면 keyObj !== {}
console.log(myMap.get(function () {})); // undefined, 왜냐하면 keyFunc !== function () {}
NaN도 키로 사용할 수 있습니다. 모든 NaN이 자신과 같지는 않지만(NaN !== NaN은 참입니다), NaN은 서로 구별할 수 없기 때문에 다음과 같은 예시가 동작합니다.
const myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN);
// "not a number"
const otherNaN = Number("foo");
myMap.get(otherNaN);
// "not a number"
맵은 for...of 반복을 사용하여 순회할 수 있습니다.
const myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (const [key, value] of myMap) {
console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one
for (const key of myMap.keys()) {
console.log(key);
}
// 0
// 1
for (const value of myMap.values()) {
console.log(value);
}
// zero
// one
for (const [key, value] of myMap.entries()) {
console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one
맵은 forEach() 메서드를 사용하여 순회할 수 있습니다.
myMap.forEach((value, key) => {
console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one
const kvArray = [
["key1", "value1"],
["key2", "value2"],
];
// Use the regular Map constructor to transform a 2D key-value Array into a map
const myMap = new Map(kvArray);
console.log(myMap.get("key1")); // "value1"
// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
// A succinct way to do the same, using the spread syntax
console.log([...myMap]);
// Or use the keys() or values() iterators, and convert them to an array
console.log(Array.from(myMap.keys())); // ["key1", "key2"]
Array와 같이 Map은 복제가 가능합니다.
const original = new Map([[1, "one"]]);
const clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false (useful for shallow comparison)
참고 : 데이터 자체는 복제가 안된다는 사실을 명심하셔야 합니다.
맵은 키 유일성을 유지한채로 병합이 가능합니다.
const first = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
const second = new Map([
[1, "uno"],
[2, "dos"],
]);
// 두 맵을 병합합니다. 키 값이 중복될 경우 마지막 키의 값을 따릅니다.
// 전개 문법은 맵을 배열로 변환합니다.
const merged = new Map([...first, ...second]);
console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
맵은 배열과 병합될 수 있습니다.
const first = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
const second = new Map([
[1, "uno"],
[2, "dos"],
]);
// 맵을 배열로 병합하기. 중복된 키가 있다면 마지막에 병합된 맵의 키에 해당하는 값이 설정됩니다.
const merged = new Map([...first, ...second, [1, "eins"]]);
console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
| Specification |
|---|
| ECMAScript® 2027 Language Specification # sec-map-objects |