ES6 학습 10 Set 과 Map 데이터 구조

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

set 함 수 는 하나의 배열 (또는 iterable 인터페이스 가 있 는 다른 데이터 구조) 을 매개 변수 로 받 아들 여 초기 화 할 수 있 습 니 다.

//   
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

//   
const set = new Set(document.querySelectorAll('div'));
set.size // 56

//    
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

배열 중복 멤버 제거 에 사용:

[...new Set(array)]

문자열 의 중복 문자 제거:

[...new Set('ababbc')].join('')
// "abc"

Set 에 값 을 넣 을 때 유형 전환 이 일어나 지 않 기 때문에 5 와 '5' 는 서로 다른 값 입 니 다.Set 내부 에서 두 값 이 다른 지 여 부 를 판단 할 때 사용 하 는 알고리즘 을 'Same - value - zero equality' 라 고 하 는데 이것 은 정확 한 연산 자 (= = = =) 와 유사 하 며 주요 한 차이 점 은 NaN 이 자신 과 같 지 않 고 정확 한 연산 자 는 NaN 이 자신 과 같 지 않다 고 여 긴 다.

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

그리고 두 대상 은 항상 같 지 않다.

let set = new Set();

set.add({});
set.size // 1

set.add({});
set.size // 2

Set 실례 의 속성 과 방법
Set 구조의 인 스 턴 스:

Set. prototype. constructor: 구조 함수, 기본 값 은 Set 함수 입 니 다.

Set. prototype. size: Set 인 스 턴 스 의 구성원 총수 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

하나의 키 를 포함 하 는 지 여 부 를 판단 할 때 Object 구조 와 Set 구조의 쓰기 가 다 릅 니 다.

//      
const properties = {
  'width': 1,
  'height': 1
};

if (properties[someName]) {
  // do something
}

// Set   
const properties = new Set();

properties.add('width');
properties.add('height');

if (properties.has(someName)) {
  // do something
}

Array. from 방법 은 Set 구 조 를 배열 로 바 꿀 수 있 습 니 다.

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

그룹 중복 멤버 를 제거 하 는 또 다른 방법:

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

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

반복 작업

keys (): 키 이름 을 되 돌려 주 는 달력

values (): 키 값 을 되 돌려 주 는 달력

entries (): 키 값 이 맞 는 스 트 리밍 기 를 되 돌려 줍 니 다

foreach (): 리 셋 함 수 를 사용 하여 각 구성원 Set 를 옮 겨 다 니 는 순 서 는 삽입 순서 입 니 다.이 기능 은 때때로 매우 유용 합 니 다. 예 를 들 어 set 를 사용 하여 리 셋 함수 목록 을 저장 하고 호출 할 때 추가 순서에 따라 호출 할 수 있 습 니 다.(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"]

(2) foreach () 방법

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

foreach 방법 은 두 번 째 매개 변 수 를 가 질 수 있 습 니 다. 바 인 딩 처리 함수 내부 의 this 대상 (3) 이 옮 겨 다 니 는 응용 을 표시 합 니 다.

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 방법 을 이용 하 는 것 이다.

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

//    
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set   2, 4, 6

WeakSet
속뜻
WeakSet 구 조 는 Set 와 유사 하 며 중복 되 지 않 는 값 의 집합 이기 도 합 니 다.하지만 세트 와 는 두 가지 차이 가 있다.우선 WeakSet 의 멤버 는 대상 일 뿐 다른 유형의 값 일 수 없다.

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

Map
JavaScript 의 대상 (Object) 은 본질 적 으로 키 값 이 맞 는 집합 (Hash 구조) 이지 만 전통 적 으로 문자열 을 키 로 만 사용 할 수 있 습 니 다.이것 은 그것 의 사용 에 매우 큰 제한 을 가 져 왔 다.

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

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

이것 은 대상 과 유사 하고 키 값 이 맞 는 집합 이지 만 '키' 의 범 위 는 문자열 에 국한 되 지 않 으 며 각종 유형의 값 (대상 포함) 을 키 로 사용 할 수 있다.

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

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

m.has(o) // true
m.delete(o) // true
m.has(o) // false

구조 함수 로 서 맵 도 하나의 배열 을 매개 변수 로 받 아들 일 수 있 습 니 다.이 배열 의 구성원 은 키 값 이 맞다 는 것 을 나타 내 는 배열 입 니 다.

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)
);

사실은 배열 뿐만 아니 라 Iterator 인 터 페 이 스 를 가 진 모든 구성원 이 하나의 이중 요소 가 있 는 배열 의 데이터 구조 (상세 한 내용 은 1 장 참조) 는 Map 구조 함수 의 매개 변수 로 사용 할 수 있다.셋 과 맵 모두 새로운 맵 을 만 드 는 데 쓸 수 있다 는 얘 기다.

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

같은 키 에 여러 번 값 을 부여 하면 뒤의 값 은 앞의 값 을 덮어 씁 니 다.

const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"

알 수 없 는 키 를 읽 으 면 undefined 로 돌아 갑 니 다.

new Map().get('asfddfsasadf')
// undefined

같은 대상 에 대한 인용 만 이 맵 구 조 를 같은 키 로 볼 수 있 음 을 주의 하 십시오.

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

위 코드 의 set 와 get 방법 은 겉 으로 는 같은 키 를 대상 으로 하지만 실제로는 두 개의 값 입 니 다. 메모리 주 소 는 다 르 기 때문에 get 방법 은 이 키 를 읽 을 수 없고 undefined 로 돌아 갑 니 다.같은 값 의 두 인 스 턴 스 는 Map 구조 에서 두 개의 키 로 여 겨 집 니 다.

const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222

변수 k1 과 k2 의 값 은 같 지만 맵 구조 에서 두 개의 키 로 간주 된다.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 실례 의 속성 과 조작 방법
(1) size 속성 size 속성 은 맵 구조의 구성원 총 수 를 되 돌려 줍 니 다.

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2

(2)set(key, value)

const m = new Map();

m.set('edition', 6)        //      
m.set(262, 'standard')     //     
m.set(undefined, 'nah')    //    undefined

set 방법 은 현재 맵 대상 을 되 돌려 주기 때문에 체인 으로 쓸 수 있 습 니 다.

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

(3)get(key)

const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') //     

m.get(hello)  // Hello ES6!

(4)has(key)

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

(5)delete(key)

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

(6)clear()

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

옮 겨 다 니 는 방법

keys (): 키 이름 을 되 돌려 주 는 달력 입 니 다.

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

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

foreach (): 맵 을 옮 겨 다 니 는 모든 멤버.Map 의 옮 겨 다 니 는 순 서 는 삽입 순서 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 자체 에 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 에는 또 하나의 foreach 방법 이 있 습 니 다. 배열 의 foreach 방법 과 유사 하고 옮 겨 다 닐 수 있 습 니 다.

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

foreach 방법 은 두 번 째 인 자 를 받 아들 여 this 를 연결 할 수 있 습 니 다.

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

다른 데이터 구조 와 의 상호 전환
(1) Map 을 배열 Map 으로 바 꾸 는 가장 편리 한 방법 은 확장 연산 자 (...) 를 사용 하 는 것 이다.

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

(2) 배열 을 맵 으로 바 꾸 어 배열 을 맵 구조 함수 에 전달 하면 맵 으로 바 꿀 수 있다.

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

(3) 맵 대상 전환

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) 대상 이 맵 으로 전환

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 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}'

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 으로 전 환 된 정상 적 인 상황 에서 모든 키 이름 은 문자열 입 니 다.

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']}