ES6 set (전재)

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 구조 에 중복 되 는 값 을 추가 하지 않 음 을 나타 낸다.
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

//   
function divs () {
  return [...document.querySelectorAll('div')];
}

const set = new Set(divs());
set.size // 56

//    
divs().forEach(div => set.add(div));
set.size // 56

위의 코드 에서 예 1 과 예 2 는 모두 set 함수 가 배열 을 매개 변수 로 받 아들 이 고 예 3 은 유사 한 배열 의 대상 을 매개 변수 로 받 아들 이 는 것 이다.
위의 코드 에서 도 배열 의 중복 멤버 를 제거 하 는 방법 을 보 여 주 었 다.

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

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

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

위의 코드 는 Set 인 스 턴 스 에 NaN 두 개 를 추 가 했 지만 하나 만 추가 할 수 있 습 니 다.이 는 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]

반복 작업
set 구조의 인 스 턴 스 는 네 가지 옮 겨 다 니 는 방법 이 있 습 니 다. 구성원 을 옮 겨 다 니 는 데 사용 할 수 있 습 니 다.

keys()：        
values()：        
entries()：         
forEach()：            

특히 set 의 옮 겨 다 니 는 순 서 는 삽입 순서 라 는 점 을 지적 해 야 한다.이 기능 은 때때로 매우 유용 합 니 다. 예 를 들 어 set 를 사용 하여 리 셋 함수 목록 을 저장 하고 호출 할 때 추가 순서에 따라 호출 할 수 있 습 니 다.
（1）keys()，values()，entries()
keys 방법, values 방법, entries 방법 은 모두 옮 겨 다 니 는 대상 을 되 돌려 줍 니 다.Set 구조 에 키 이름 이 없 기 때문에 키 값 (또는 키 이름과 키 값 이 같은 값) 만 있 기 때문에 keys 방법 과 values 방법의 행동 은 완전히 일치 합 니 다. \ # \ # \ #편력 조작 술부
set 구조의 인 스 턴 스 는 네 가지 옮 겨 다 니 는 방법 이 있 습 니 다. 구성원 을 옮 겨 다 니 는 데 사용 할 수 있 습 니 다.

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

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

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

forEach(): 리 셋 함 수 를 사용 하여 각 구성원 을 옮 겨 다 니 기

특히 Set 의 옮 겨 다 니 는 순서 가 삽입 순서 라 는 점 을 지적 해 야 한다.이 기능 은 때때로 매우 유용 합 니 다. 예 를 들 어 set 를 사용 하여 리 셋 함수 목록 을 저장 하고 호출 할 때 추가 순서에 따라 호출 할 수 있 습 니 다.
（1） keys() ， values() ， entries() 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"]

위의 코드 에서 entries 방법 이 되 돌아 오 는 스 트 리밍 기 는 키 이름과 키 값 을 포함 하기 때문에 매번 하나의 배열 을 출력 할 때마다 두 멤버 는 완전히 같 습 니 다.
set 구조의 인 스 턴 스 는 기본적으로 옮 겨 다 닐 수 있 습 니 다. 기본 옮 겨 다 니 기 생 성 함수 가 바로 values 방법 입 니 다.

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

이것 은 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 방법 도 있 습 니 다. 모든 구성원 에 게 특정한 조작 을 수행 하고 값 을 되 돌려 주지 않 습 니 다.

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

위의 코드 는 foreach 방법의 매개 변 수 는 처리 함수 라 는 것 을 설명 합 니 다.이 함수 의 매개 변 수 는 배열 의 foreach 와 일치 하 며, 키 값, 키 이름, 집합 자체 (상례 에서 이 매개 변 수 를 생략 하 였 습 니 다) 입 니 다.여기 서 주의해 야 할 것 은 Set 구조의 키 이름 은 키 값 (둘 은 같은 값) 이기 때문에 첫 번 째 매개 변 수 는 두 번 째 매개 변수의 값 과 영원히 같 습 니 다.
또한, foreach 방법 은 두 번 째 매개 변 수 를 가지 고 바 인 딩 처리 함수 내부 의 this 대상 을 표시 할 수 있 습 니 다.
(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 방법 을 이용 하 는 것 이다.

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

위의 코드 는 두 가지 방법 을 제공 하여 옮 겨 다 니 는 작업 에서 원래 의 Set 구 조 를 직접 바 꾸 었 다.