ES6 의 Set 와 Map 방법 을 정리 합 니 다.

본 고 는 완 일 봉 선생 의 라 는 책의 set 와 map 1 장 을 참고 한다.
1. set
ES6 는 새로운 데이터 구조 Set 을 제공 합 니 다.그것 은 배열 과 유사 하지만 구성원 의 값 은 모두 유일 하 며 중복 되 는 값 이 없다.set 자 체 는 set 데이터 구 조 를 만 드 는 구조 함수 입 니 다.

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

위 코드 통과
add 방법
Set 구조 에 멤버 를 가입 한 결과
set 구 조 는 중복 되 는 값 을 추가 하지 않 습 니 다.

//   
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

//   
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

위의 코드 에서 도 배열 의 중복 멤버 를 제거 하 는 방법 을 보 여 주 었 다.

//          
[...new Set(array)]

또 하나의 함수 법 배열 이 무 거 워 집 니 다.

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

Set 실례 의 방법 은 두 가지 로 나 뉜 다. 조작 방법 (조작 데이터 에 사용) 과 옮 겨 다 니 는 방법 (구성원 옮 겨 다 니 는 데 사용) 이다.다음은 먼저 네 가지 조작 방법 을 소개 한다.add(value): 어떤 값 을 추가 하고 Set 구조 자 체 를 되 돌려 줍 니 다. delete(value): 어떤 값 을 삭제 하고 불 값 을 되 돌려 삭제 에 성 공 했 는 지 여 부 를 표시 합 니 다. has(value): 이 값 이 Set 의 구성원 인지 아 닌 지 를 나타 내 는 불 값 을 되 돌려 줍 니 다. clear(): 모든 구성원 을 삭제 하고 반환 값 이 없습니다.

s.add(1).add(2).add(2);
//   2      

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

set 구조의 인 스 턴 스 는 네 가지 옮 겨 다 니 는 방법 이 있 습 니 다. 구성원 을 옮 겨 다 니 는 데 사용 할 수 있 습 니 다.
keys (): 키 이름 을 되 돌려 주 는 스 트 리밍 기 values (): 키 값 을 되 돌려 주 는 스 트 리밍 기 entries (): 키 값 이 맞 는 스 트 리밍 기 foreach () 를 되 돌려 줍 니 다. 리 셋 함 수 를 사용 하여 모든 구성원 을 옮 겨 다 닙 니 다.
（1） keys() ， values() ， entries()
set 구조 에 키 이름 이 없 기 때문에 키 값 (또는 키 이름과 키 값 이 같은 값) 만 있 기 때문에 keys 방법 과 values 방법의 행동 은 완전히 일치 합 니 다.

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

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

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}
// red
// green
// blue

（2） forEach()
Set 구조의 인 스 턴 스 forEach 방법 은 모든 구성원 에 게 특정한 조작 을 수행 하 는 데 사용 되 며 값 을 되 돌려 주지 않 습 니 다.

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

(3) 옮 겨 다 니 는 응용
확장 연산 자 ... 내부 사용 for...of 순환 이 므 로 set 구조 에 도 사용 할 수 있 습 니 다.

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

확장 연산 자 와 set 구 조 를 결합 하면 배열 의 중복 구성원 을 제거 할 수 있다.

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

그리고map
화해시키다filter
방법 도 Set 에 사용 할 수 있 습 니 다.

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
//   Set  ：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
//   Set  ：{2, 4}

따라서 set 를 사용 하면 집합 (Union), 교 집합 (Intersect), 차 집합 (Difference) 을 쉽게 실현 할 수 있다.

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

//   
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

//   
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

//   
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

옮 겨 다 니 는 작업 에서 원래 의 Set 구 조 를 동시에 바 꾸 려 면 현재 직접적인 방법 은 없 지만 두 가지 변통 방법 이 있다.하 나 는 원 Set 구 조 를 이용 하여 새로운 구 조 를 매 핑 한 다음 에 원래 의 Set 구조 에 값 을 부여 하 는 것 이다.다른 하 나 는 Array. from 방법 을 이용 하 는 것 이다.
1. Map
set 는 배열 과 유사 하지만 맵 은 키 쌍 (Key, Value) 과 유사 합 니 다.
ES6 는 맵 데이터 구 조 를 제공 합 니 다.이것 은 대상 과 유사 하고 키 값 이 맞 는 집합 이지 만 '키' 의 범 위 는 문자열 에 국한 되 지 않 으 며 각종 유형의 값 (대상 포함) 을 키 로 사용 할 수 있다.

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"

위 코드 는 맵 인 스 턴 스 를 새로 만 들 때 두 개의 키 name 과 title 을 지정 합 니 다.Map 구조 함 수 는 배열 을 매개 변수 로 받 아들 이 고 실제 적 으로 다음 알고리즘 을 실행 합 니 다.

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

const map = new Map();

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

맵 의 키 가 간단 한 형식의 값 (숫자, 문자열, 불 값) 이 라면 두 개의 값 이 엄 격 히 같 으 면 맵 은 0 과 0 을 포함 하여 하나의 키 로 간주 합 니 다. 불 값 true 와 문자열 true 는 두 개의 서로 다른 키 입 니 다.또한 undefined 와 null 도 두 개의 서로 다른 키 입 니 다.NaN 은 엄격 하지 않 고 자신 과 같 지만 맵 은 같은 키 로 본다.

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

Map 에는 size () 속성 이 있 습 니 다. Map 대상 크기, set (key, value), get (Key), delete (key), has (key), clear () 방법 을 봅 니 다.
옮 겨 다 니 는 방법 Map 구조 원생 은 세 개의 옮 겨 다 니 는 생 성 함수 와 옮 겨 다 니 는 방법 을 제공 합 니 다.
keys (): 키 이름 의 달력 을 되 돌려 줍 니 다.values (): 키 값 을 되 돌려 주 는 달력 입 니 다.entries (): 모든 구성원 의 달력 을 되 돌려 줍 니 다.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"

Map 구 조 를 배열 구조 로 바 꾸 고 빠 른 방법 은 확장 연산 자 를 사용 하 는 것 입 니 다 (...
）。

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

결합 배열 의map
방법filter
방법, 맵 의 스 트 리밍 과 필터 링 을 실현 할 수 있 습 니 다.map
화해시키다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'}

Map 은 배열, 대상, JSON 과 서로 전환 할 수 있 으 며 JSON 과 의 전환 을 기록 합 니 다.
 --맵 을 JSON 맵 으로 전환 하고 JSON 맵 을 JSON 으로 전환 하려 면 두 가지 상황 을 구분 해 야 합 니 다.맵 의 키 이름 이 모두 문자열 인 경우 대상 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}'

또 다른 경 우 는 맵 의 키 이름 에 비 문자열 이 있 습 니 다. 이 때 배열 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"]]]'

-- JSON 지도 로 전환
JSON 이 Map 으로 바 뀌 면 모든 키 이름 이 문자열 입 니 다.

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

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

그러나 JSON 전체 가 하나의 배열 이 고 각 배열 의 구성원 자체 가 두 명의 구성원 이 있 는 배열 이라는 특수 한 상황 이 있다.이 때 는 일일이 대응 해 맵 으로 전환 할 수 있다.이 는 종종 배열 이 JSON 으로 바 뀌 는 역작 동 이다.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

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

Weak Set 과 Weak Map 은
메모리 누 출 을 방지 하려 면 여 기 는 설명 하지 않 습 니 다.