객체에서 키, 값을 가져올때
변수명.keys , values가 아니라
Object.keys 이런게 불만이었다
근데 이거 불만을 들어주겠다고 내놓은게 업데이트는 안하고 Map이란걸 만들었다
https://maxkim-j.github.io/posts/js-map
Map
- Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션
- key 를 사용해서 value 를 get, set 할 수 있음
- key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만
- key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의!
let m = new Map();
// Map에 값을 넣기
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);
// Map의 값에 접근하기
console.log(m.get('하나'));
console.log(m.get(true));
// Map의 값이 있는지 확인하기
console.log(m.has('하나'));
// Map의 값을 제거하기
console.log(m.delete('하나'));
console.log(m.has('하나'));
console.log(m);
// Map의 크기를 확인하기
console.log(m.size);
// let mm = new Map()
// mm.set('하나', m)
// Map(1) {'하나' => Map(3)}
// mm.set('하나', {'one':1, 'two':2})
// Map(1) {'하나' => {…}}
활용법
// Map의 순환
for (var variable of m) {
console.log(`m을 순회하고 있습니다. ${variable[0]}`)
console.log(`m을 순회하고 있습니다. ${variable[1]}`)
}
// Map의 값에 접근
console.log(m.keys());
console.log(m.values());
console.log(m.entries());
// 인덱스를 가지는 자료형을 맵핑하기
let temp = new Map([[1, 10],
[2, 20],
[3, 30],
[4, 40]]);
console.log(temp);Object vs Map
오브젝트랑 맵을 자주 비교하는데.. 오브젝트는 이터러블하지않고
Map은 이터러블(순회) 하다
Map 객체와 Object 는 둘 다 key - value 관계를 가진다는 점에서 비슷해보이지만 몇 가지 중요한 차이점이 있습니다
- Object의 키는 문자열 타입으로만 지정해야하지만, Map의 키는 모든 값을 가질 수 있습니다.
- Object는 크기를 사용자가 직접 수동으로 알아내야 하지만, Map은 size를 통해 크기를 쉽게 얻을 수 있습니다.
그외 메서드 set() get() has()
clear()
이 clear()메서드는 Map개체 에서 모든 요소를 제거 합니다.
clear()
var myMap = new Map();
myMap.set('bar', 'baz');
myMap.set(1, 'foo');
myMap.size; // 2
myMap.has('bar'); // true
myMap.clear();
myMap.size; // 0
myMap.has('bar') // falsedelete()
이 delete()메서드는 Map키로 개체 에서 지정된 요소를 제거합니다 .
delete(key)
const map1 = new Map();
map1.set('bar', 'foo');
console.log(map1.delete('bar'));
// expected result: true
// (true indicates successful removal)
console.log(map1.has('bar'));
// expected result: false
원본자체를 바꾼다
반환값 true Map개체 의 요소가 존재하고 제거된 경우 또는 false요소가 존재하지 않는 경우.
get()
이 get()메서드는 Map개체 에서 지정된 요소를 반환 합니다.
get(key)
const map1 = new Map();
map1.set('bar', 'foo');
console.log(map1.get('bar'));
// expected output: "foo"
console.log(map1.get('baz'));
// expected output: undefined반환값지정된 키와 연결된 요소 또는 개체 undefined에서 키를 찾을 수 없는 경우 Map.
has()
has()메서드는 지정된 키가 있는 요소가 있는지 여부를 나타내는 부울을 반환합니다.
has(key)
const map1 = new Map();
map1.set('bar', 'foo');
console.log(map1.has('bar'));
// expected output: true
console.log(map1.has('baz'));
// expected output: false반환값 지정된 키를 가진 요소가 Map객체에 존재하는 경우 true , 그렇지 않으면 false.
set()
set()메서드는 지정된 키와 값이 있는 요소를 Map개체에 추가하거나 업데이트 합니다.
set(key, value)
let m = new Map();
// Map에 값을 넣기
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);
m // {'하나' => '1', 1 => '하나', true => 1, false => 0}반환값 현재 map을 반환
keys()
keys()메서드는 삽입 순서로 개체의 각 요소에 대한 키를 포함 하는 새 Iterator 개체를 반환합니다
keys()
var myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');
var mapIter = myMap.keys();
console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // Object
mapIter //MapIterator {'0', 1, {…}}반환값 새로운 Map반복자 객체.
values()
values()메서드는 삽입 순서로 개체의 각 요소에 대한 값을 포함 하는 새 Iterator 개체를 반환합니다
values()
var myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');
var mapIter = myMap.values();
console.log(mapIter.next().value); // "foo"
console.log(mapIter.next().value); // "bar"
console.log(mapIter.next().value); // "baz"반환값 새로운 Map반복자 객체.
entries()
entries()메서드는 삽입 순서로 개체의 각 요소에 대한 쌍을 포함 하는 새 Iterator 개체를 반환합니다 . 이 특별한 경우 이 반복자 객체도 반복 가능하므로 for-of 루프를 사용할 수 있습니다.
entries()
const map1 = new Map();
map1.set('0', 'foo');
map1.set(1, 'bar');
const iterator1 = map1.entries();
iterator1//MapIterator {'0' => 'foo', 1 => 'bar'}
console.log(iterator1.next().value);
// expected output: ["0", "foo"]
console.log(iterator1.next().value);
// expected output: [1, "bar"]