ES6 에서 Set 와 Map 데이터 구조 (2)

ES6 는 새로운 데이터 구조 Set 과 Map 을 제공 합 니 다.데이터 구조 설정
Map
JavaScript 에서 대상 (Object) 은 본질 적 으로 키 쌍 의 집합 이지 만 전통 적 으로 문자열 을 키 로 만 사용 할 수 있 습 니 다. ES6 의 Map 데이터 구조 도 키 쌍 의 집합 이지 만 키 는 문자열 에 국한 되 지 않 고 각종 유형의 값 은 대상 을 포함 하여 키 로 사용 할 수 있 습 니 다.

//ES5  Object
const data = {
     };
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

//ES6   Map
const m = new Map();
const o = {
     p: 'Hello World'};

m.set(o, 'content')
console.log(m.get(o)) // "content"

const a = ["name"];
m.set(a,"zsl");
console.log(m.get(a)) // "zsl"

맵 은 구조 함수 로 서 배열 을 매개 변수 로 받 아들 일 수 있 습 니 다.

//   
const map = new Map([
  ['name', '  '],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "  "
map.has('title') // true
map.get('title') // "Author"

//   
const items = [
  ['name', '  '],
  ['title', 'Author']
];

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);

Map 이 구조 함수 매개 변수 가 배열 일 때 (위의 예제 1) 실제 실 행 된 것 은 예제 2 의 절차 입 니 다.
Map 실례 의 속성 과 조작 방법 Map 구조의 실례 는 다음 과 같은 속성 과 조작 방법 이 있다.

size : size 속성 은 Map 구조의 구성원 총 수 를 되 돌려 줍 니 다.

Map.prototype.set(key, value): set 방법 은 키 이름 key 에 대응 하 는 키 값 을 value 로 설정 하고 전체 맵 구 조 를 되 돌려 줍 니 다.키 가 값 이 있 으 면 키 값 이 업 데 이 트 됩 니 다. 그렇지 않 으 면 이 키 를 새로 생 성 합 니 다.

Map.prototype.get(key): get 방법 은 key 에 대응 하 는 키 값 을 읽 고 key 를 찾 지 못 하면 undefined 로 돌아 갑 니 다.

Map.prototype.has(key): has 방법 은 하나의 불 값 을 되 돌려 주 고 특정한 키 가 현재 Map 대상 에 있 는 지 여 부 를 나타 낸다.

Map.prototype.delete(key): delete 방법 은 어떤 키 를 삭제 하고 트 루 로 돌아 갑 니 다.삭제 에 실패 하면 false 로 돌아 갑 니 다.

Map.prototype.clear(): clear 방법 으로 모든 구성원 을 제거 하고 반환 값 이 없습니다.

const m = new Map();
m.set('a', 1);
m.set('b', 2);

console.log(m.size); //2

console.log(m.get('a')); //1

console.log(m.has('a')); //true
console.log(m.has('b')); //true
console.log(m.has('c')); //false

m.delete('b');
console.log(m.has('b')); //false
console.log(m.size); //1

m.clear();
console.log(m.size); //0

옮 겨 다 니 는 방법 Map 구조 원생 은 세 개의 옮 겨 다 니 는 생 성 함수 와 옮 겨 다 니 는 방법 을 제공 합 니 다.맵 의 옮 겨 다 니 는 순 서 는 삽입 순서 입 니 다.

Map.prototype.keys(): 키 이름 의 달력 을 되 돌려 줍 니 다.

Map.prototype.values(): 키 값 을 되 돌려 주 는 달력 입 니 다.

Map.prototype.entries(): 모든 멤버 의 달력 을 되 돌려 줍 니 다.

Map.prototype.forEach(): 맵 을 옮 겨 다 니 는 모든 멤버.

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
     
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
     
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
     
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

//   
for (let [key, value] of map.entries()) {
     
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

//      map.entries()
for (let [key, value] of map) {
     
  console.log(key, value);
}
// "F" "no"
// "T" "yes"


//forEach  
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
map.forEach((value, key) => console.log(key,value));
// "F" "no"
// "T" "yes"

지도의 응용
다른 데이터 구조의 상호 전환

//（1）Map     

const myMap = new Map()
  .set(true, 7)
  .set({
     foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]



//（2）      Map

new Map([
  [true, 7],
  [{
     foo: 3}, ['abc']]
])
// Map {
     
//   true => 7,
//   Object {foo: 3} => ['abc']
// }



//（3）Map     

function strMapToObj(strMap) {
     
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
     
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }



//（4）     Map

function objToStrMap(obj) {
     
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
     
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({
     yes: true, no: false})
// Map {"yes" => true, "no" => false}



//（5）Map    JSON

 1. //Map         ，           JSON。
  function strMapToJson(strMap) {
     
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

 2. //Map         ，           JSON。
  function mapToArrayJson(map) {
     
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({
     foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'



（6）JSON    Map

 1. //         

function jsonToStrMap(jsonStr) {
     
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

 2. //   JSON       
function jsonToMap(jsonStr) {
     
  return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

맵 은 배열 의 맵 과 filter 방법 을 간접 적 으로 사용 합 니 다.

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
//    Map    {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
//    Map    {2 => '_a', 4 => '_b', 6 => '_c'}

총결산
set 구조의 인 스 턴 스 는 기본적으로 옮 겨 다 닐 수 있 습 니 다. 기본 옮 겨 다 니 기 생 성 함수 가 바로 values 방법 입 니 다.이것 은 values 방법 을 생략 하고 for... of 순환 으로 Set 를 옮 겨 다 닐 수 있 음 을 의미 합 니 다.

Set.prototype[Symbol.iterator] === Set.prototype.values  //true

// for...of     Set
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
     
  console.log(x);
}
// red
// green
// blue

Map 구조의 기본 달력 인터페이스 (Symbol. iterator 속성) 가 바로 entries 방법 입 니 다.이 는 entries 방법 을 생략 하고 for... of 순환 으로 맵 을 옮 겨 다 닐 수 있다 는 뜻 이다.

map[Symbol.iterator] === map.entries   //true 

// for...of     Set
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for(let x of map){
     
    console.log(x)
}
//["F", "no"]
//["T", "yes"]

Set 데이터 구 조 는 이전 노트 를 볼 수 있 습 니 다. ES6 에서 Set 과 Map 데이터 구조 (1)