Set

Gunwoo Kim·2021년 7월 31일
0

JavaScript

목록 보기
17/17
post-thumbnail

이번에 배열에 관련된 중복을 제거하여 반환하기 위해 작성중 Set이라는 자바스크립트의 객체를 알게되었습니다.

Set ?

Set 객체로 ES6에서 등장한 중복을 제거한 값들의 집합입니다.

구문

new Set([iterable]);

  • 매개변수
    iterable
    반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가됩니다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 됩니다.
  • 반환 값
    새로운 Set 객체.

    MDN Set 객체

특징

Set 객체는 중복되지 않는 유일한 값들의 집합이다.
Set 객체는 다음과 같은 특징을 가진다.
1. 동일한 값을 중복하여 포함할수 없다
2. 요소 순서에 의미가 없다
3. 인덱스로 요소에 접근할 수 없다.
이러한 Set 객체수학적 집합을 구현하기위한 자료구조이다.
그래서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

사용법

Set 객체 사용

특정 요소 추가: add

Set 객체에 주어진 값을 갖는 새로운 요소를 추가

//Set.add(value)
mySet.add(1);		// Set { 1 }
mySet.add(5);		// Set { 1, 5 }
mySet.add('hi');	// Set { 1, 5, 'hi' }

특정 요소 확인: has

Set 객체에 주어진 값을 갖는 요소가 있는지 확인 (boolean)

//Set.has(value)
//mySet { 1, 5, 'hi' }
mySet.has(1);		// true
mySet.has(3);		// false
mySet.has('hi');	// true

특정 요소 제거: delete

Set 객체에서 주어진 값을 갖는 요소를 제거

//Set.delete(value)
//mySet { 1, 5, 'hi' }
mySet.delete('hi');	// Set { 1, 5 }
mySet.delete(1);	// Set { 5 }```

모든 요소 제거: clear

Set 객체에서 모든 요소를 제거

//Set.clear()
//mySet { 1, 5, 'hi' }
mySet.clear()	// Set { }```

모든 요소 제거: clear

Set 객체에서 모든 요소를 제거

//Set.clear()
//mySet { 1, 5, 'hi' }
mySet.clear()	// Set { }```

요소의 개수 반환: size

Set 객체 내에 있는 요소들의 개수를 반환

//Set.size
//mySet { 1, 5, 'hi' }
mySet.size	// 3```
var mySet = new Set();

mySet.add(1); // Set { 1 }
mySet.add(5); // Set { 1, 5 }
mySet.add(5); // Set { 1, 5 }
mySet.add('some text'); // Set { 1, 5, 'some text' }
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음

mySet.has(1); // true
mySet.has(3); // false, 3은 set에 추가되지 않았음
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has('Some Text'.toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5); // set에서 5를 제거함
mySet.has(5);    // false, 5가 제거되었음

mySet.size; // 4, 방금 값을 하나 제거했음
console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}

Set 반복

// set 내 항목에 대해 반복
// 순서대로 항목을 (콘솔에) 기록: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet) console.log(item);

// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet.keys()) console.log(item);

// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet.values()) console.log(item);

// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
// (여기서 key와 value는 같음)
for (let [key, value] of mySet.entries()) console.log(key, value);

// Set 객체를 배열 객체로 변환 (Array.from으로)
var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}]

// 다음도 HTML 문서에서 실행하는 경우 작동함
mySet.add(document.body);
mySet.has(document.querySelector('body')); // true


// forEach로 set 항목 반복
mySet.forEach(function(value) {
  console.log(value);
});

기본 집합 연산 구현

//Examples
var setA = new Set([1, 2, 3, 4]),
    setB = new Set([2, 3]),
    setC = new Set([3, 4, 5, 6]);

// 합집합
setA.union(setC); // => Set [1, 2, 3, 4, 5, 6]
// 교집합
setA.intersection(setC); // => Set [3, 4]
// 차집합
setA.difference(setC); // => Set [1, 2]

Array 객체와의 관계

var myArray = ['value1', 'value2', 'value3'];

// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용
var mySet = new Set(myArray);

mySet.has('value1'); // true 반환

// set을 Array로 변환하기 위해 전개 연산자 사용함.
console.log([...mySet]); // myArray와 정확히 같은 배열을 보여줌

👉 중복제거 👍👍

기존 리스트를 중복리스트를 제거하기 위해 아래와 같이 처리하였다.

const 중복 = [1, 2, 3, 4, 5, 1, 2, 3];
const 중복제거용객체 = {};
for (const el of 중복) {
  중복제거용객체[el] = true; // 어떤값이든 상관은 없음....
}
const 결과 = Object.keys(중복제거용객체);
///[1,2,3,4,5]

Set을 사용하게 된다면 아래와 같이 더 편해졌다.

const 중복 = [1, 2, 3, 4, 5, 1, 2, 3];
const 결과 = new Set(중복);
[...결과] 
// 결과값이 Set 객체로 나와서 Array형태로 변경함
// 배열 메소드를 사용하기 위함

0개의 댓글