Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- ajax
- 무료 백엔드 배포
- select by attribute
- just-one-small-sip
- flex-shrink
- css 오버레이
- flex-grow
- css
- regExp
- close together
- improve-iq-by-up-to-10%!
- Sass
- css variables
- 정규표현식
- Prototype
- shit-christmas
- css grid
- Express
- module wrapper function
- node
- Object.create
- es6
- Node.js
- flexbox
- 디자인패턴
- express-handlebars
- Engoo
- JS
- flex-basis
- img 확대
Archives
- Today
- Total
ES6 Map, Map 컬렉션 in JS 본문
ES6 에서는 Map이라는 새로운 데이터 구조가 추가되었습니다.
해당 데이터 구조는 키-값 쌍을 저장하며, 그 저장 순서까지도 기억한다고 하네요.
또한 Object Literal과는 다르게 키나 값에 어떠한 타입의(primitive or reference) 데이터가 들어가도 무관하다고 합니다.
아래 코드로 살펴보시죠.
// Map: 키-값 쌍을 저장. 삽입순서 또한 기억하는 콜렉션
// 일반 객체 리터럴과는 다르게 primitive or reference type 전부 키 또는 값으로 이용가능하다.
const map1 = new Map();
// Set keys
const key1 = "string";
const key2 = {};
const key3 = function () {
};
// set map values by key
map1.set(key1, "Value of key1");
map1.set(key2, "value of key2");
map1.set(key3, "Value of key3");
console.log(map1.get(key1));
console.log(map1.get(key2));
console.log(map1.get(key3));
// Count values
console.log(map1.size);
// Iterating Maps
// Loop using for .. of to get keys and values
for (let [key, value] of map1) {
console.log(`${key} = ${value}`);
}
// iterate keys only
for (let key of map1.keys()) {
console.log(key);
}
// iterate values only
for (let value of map1.values()) {
console.log(value);
}
// also can use foreach
map1.forEach(([value, key]) => {
console.log(`${key} = ${value}`);
});
// can be array
const keyValArr = Array.from(map1);
console.log(keyValArr); // arrays in array
// can extract only values or keys as an array
const keyArr = Array.from(map1.keys());
console.log(keyArr);
'2021 프론트 엔드 로드맵 따라가기 > JS' 카테고리의 다른 글
ES6 Set, Set 데이터 구조 in JS (0) | 2021.06.16 |
---|---|
ES6 Destructuring and Rest Parameter, 구조분해할당 (0) | 2021.06.16 |
ES6 Symbol (0) | 2021.06.15 |
ES6 Iterator & Generator (0) | 2021.06.15 |
Character Class & Assertions in Regular Expression (0) | 2021.06.14 |
Comments