일반 자바 스크립트 객체 대신지도를 사용하는시기
일반 JavaScript 객체 {키 : 'value'}는 구조화 된 데이터를 보유합니다. 그러나 일반 JS 객체에는 한계가 있습니다.
문자열과 기호 만 객체의 키로 사용할 수 있습니다. 다른 것들, 예를 들어 숫자를 객체의 키로 사용하면 해당 키에 액세스하는 동안 해당 키가 문자열로 변환되어 암시 적으로 유형의 일관성을 잃게됩니다. const names = {1 : 'one', 2 : 'two'}; Object.keys (이름); // [ '1', '2']
JS 식별자를 객체의 키 이름 (예 : toString, 생성자 등)으로 작성하여 프로토 타입에서 상속 된 속성을 실수로 덮어 쓸 가능성이 있습니다.
다른 객체를 객체의 키로 사용할 수 없으므로 해당 객체를 다른 객체의 키로 작성하고 다른 객체의 값에 추가 정보가 포함되어 객체에 대한 추가 정보를 쓸 수 없습니다.
객체는 반복자가 아니다
물체의 크기는 직접 결정할 수 없습니다
이러한 객체 제한 사항은지도에서 해결되지만 Google은지도를 대체 대신 객체를 보완하는 것으로 간주해야합니다. 기본적으로 Map은 단지 배열의 배열이지만 배열의 배열에 대해서만 new 키워드를 사용하여 배열의 배열을 Map 객체에 인수로 전달해야합니다. 그렇지 않으면 배열의 배열에 대해서만 유용한 속성 및 방법을 사용할 수 없습니다. 그리고 배열 배열 내부의 키-값 쌍을 기억하십시오. 그렇지 않으면 일반 객체처럼 콜론없이 쉼표로만 맵을 구분해야합니다.
지도를 사용할지 또는 객체를 사용할지 결정하는 3 가지 팁 :
런타임에 키를 알 수없는 경우 사용자 입력으로 생성 된 키가 객체의 상속 된 속성을 덮어 쓰는 경우 객체를 사용하는 코드를 무의식적으로 깨뜨릴 수 있으므로 객체에 대한 맵을 사용하십시오. 따라서 이러한 경우 맵이 더 안전합니다. 모든 키가 동일한 유형이고 모든 맵이 동일한 유형 인 경우에도 맵을 사용하십시오.
기본 값을 키로 저장해야하는 경우 맵을 사용하십시오.
개별 요소를 조작해야하는 경우 객체를 사용하십시오.
지도 사용의 이점은 다음과 같습니다.
1. Map은 모든 키 유형을 허용하고 키 유형을 유지합니다.
객체의 키가 문자열이나 기호가 아닌 경우 JS는이를 암시 적으로 문자열로 변환합니다. 반대로, Map은 문자열, 숫자, 부울, 기호 등 모든 유형의 키를 허용하며 Map은 원래 키 유형을 유지합니다. 여기서는 맵에서 숫자를 키로 사용하고 숫자로 유지합니다.
const numbersMap= new Map();
numbersMap.set(1, 'one');
numbersMap.set(2, 'two');
const keysOfMap= [...numbersMap.keys()];
console.log(keysOfMap); // [1, 2]
맵 안에서 전체 객체를 키로 사용할 수도 있습니다. 희박한 객체로 작업 할 수 있지만 객체에 대한 일부 정보를 저장하기 위해 객체 자체에이 데이터를 첨부하지 않고 객체 관련 데이터를 저장하려는 경우가있을 수 있습니다. 이 경우 객체를 키로 사용하고 객체의 관련 데이터를 값으로 만들 수 있도록 맵을 사용해야합니다.
const foo= {name: foo};
const bar= {name: bar};
const kindOfMap= [[foo, 'Foo related data'], [bar, 'Bar related data']];
그러나이 방법의 단점은 원하는 값을 얻기 위해 전체 배열을 반복해야하기 때문에 키로 값에 액세스하는 것이 복잡하다는 것입니다.
function getBy Key(kindOfMap, key) {
for (const [k, v] of kindOfMap) {
if(key === k) {
return v;
}
}
return undefined;
}
getByKey(kindOfMap, foo); // 'Foo related data'
적절한 맵을 사용하여 값에 직접 액세스하지 못하는이 문제를 해결할 수 있습니다.
const foo= {name: 'foo'};
const bar= {name: 'bar'};
const myMap= new Map();
myMap.set(foo, 'Foo related data');
myMap.set(bar, 'Bar related data');
console.log(myMap.get(foo)); // 'Foo related data'
WeakMap을 사용 하여이 작업을 수행 할 수 있었고 const myMap = new WeakMap ()을 작성해야합니다. Map과 WeakMap의 차이점은 WeakMap은 키 (여기서는 객체)의 가비지 수집을 허용하므로 메모리 누수를 방지하고 WeakMap은 객체 만 키로 허용하며 WeakMap은 메소드 세트를 줄였습니다.
2.지도는 키 이름에 제한이 없습니다.
일반 JS 객체의 경우 실수로 프로토 타입에서 상속 된 속성을 덮어 쓸 수 있으며 위험 할 수 있습니다. 여기에서는 actor 객체의 toString () 속성을 덮어 씁니다.
const actor= {
name: 'Harrison Ford',
toString: 'Actor: Harrison Ford'
};
이제 fn isPlainObject ()를 정의하여 제공된 인수가 일반 객체인지 확인하고이 fn은 toString () 메소드를 사용하여이를 확인합니다.
function isPlainObject(value) {
return value.toString() === '[object Object]';
}
isPlainObject(actor); // TypeError : value.toString is not a function
// this is because inside actor object toString property is a string instead of inherited method from prototype
Map에는 키 이름에 대한 제한이 없으며 toString, constructor 등의 키 이름을 사용할 수 있습니다. 여기서 actorMap 객체에는 toString이라는 속성이 있지만 actorMap 객체의 프로토 타입에서 상속 된 toString () 메소드는 완벽하게 작동합니다.
const actorMap= new Map();
actorMap.set('name', 'Harrison Ford');
actorMap.set('toString', 'Actor: Harrison Ford');
function isMap(value) {
return value.toString() === '[object Map]';
}
console.log(isMap(actorMap)); // true
사용자 입력으로 키가 생성되는 상황이 발생하면 일반 객체 대신 맵에서 해당 키를 가져와야합니다. 사용자가 toString, 생성자 등의 사용자 정의 필드 이름을 선택할 수 있기 때문에 일반 객체의 키 이름으로 인해 나중에이 객체를 사용하는 코드가 손상 될 수 있습니다. 따라서 올바른 솔루션은 사용자 인터페이스 상태를지도에 바인딩하는 것입니다.지도를 깰 수있는 방법은 없습니다.
const userCustomFieldsMap= new Map([['color', 'blue'], ['size', 'medium'], ['toString', 'A blue box']]);
3.지도는 반복 가능합니다.
일반 객체의 속성을 반복하려면 Object.entries () 또는 Object.keys ()가 필요합니다. Object.entries (plainObject)는 객체에서 추출 된 키 값 쌍의 배열을 반환합니다. 그런 다음 해당 키와 값을 재구성하고 일반 키와 값을 얻을 수 있습니다.
const colorHex= {
'white': '#FFFFFF',
'black': '#000000'
}
for(const [color, hex] of Object.entries(colorHex)) {
console.log(color, hex);
}
//
'white' '#FFFFFF'
'black' '#000000'
지도는 반복 가능하므로 Map을 반복하고 키를 구조화하기 위해 entry () 메소드가 필요하지 않으므로 각 요소가 쉼표로 구분 된 키 값 쌍의 배열로 존재하는 Map 내에서 값 배열을 Map에서 직접 수행 할 수 있습니다. .
const colorHexMap= new Map();
colorHexMap.set('white', '#FFFFFF');
colorHexMap.set('black', '#000000');
for(const [color, hex] of colorHexMap) {
console.log(color, hex);
}
//'white' '#FFFFFF' 'black' '#000000'
또한 map.keys ()는 키에 대한 반복자를 반환하고 map.values ()는 값에 대한 반복자를 반환합니다.
4.지도의 크기를 쉽게 알 수 있습니다
일반 객체의 속성 수를 직접 결정할 수는 없습니다. Object.keys ()와 같은 도우미 fn이 필요합니다. Object.keys ()는 객체의 키로 배열을 반환하고 length 속성을 사용하여 키 수 또는 일반 객체의 크기를 얻을 수 있습니다.
const exams= {'John Rambo': '80%', 'James Bond': '60%'};
const sizeOfObj= Object.keys(exams).length;
console.log(sizeOfObj); // 2
그러나지도의 경우 map.size 속성을 사용하여지도 크기에 직접 액세스 할 수 있습니다.
const examsMap= new Map([['John Rambo', '80%'], ['James Bond', '60%']]);
console.log(examsMap.size);
