본문 바로가기

Javascript

[javascript] 배열(array)안에 반복된 내용을 제거하고 싶을 때는 set이용하기

  • set안에 들어간 요소들은 unique하다. 반복된 내용이 없다. 
  • set은 배열과는 다르다. 
  • set은 array,object와 같은  iterable(반복가능한)이다.

set의 사용법과 예시를 보자. 

 

예)독서모임에 왔다. 각각의 사람들에게 직업을 물어보니 아래 배열과 같이 직업들을 가지고 있다. 

모인 사람들의 직업의 종류를 정리해서 확인해보려면 set을 이용하면된다. - new Set()

const 모인사람들의직업 = ['디자이너', '개발자','마케터','개발자','디자이너','헤어디자이너'];
const 직업의종류 = new Set(모인사람들의직업);
console.log(직업의종류);

//Set(4) {"디자이너", "개발자", "마케터", "헤어디자이너"}

 

직업의 수도 확인가능하다. - set.size

const 모인사람들의직업 = ['디자이너', '개발자','마케터','개발자','디자이너','헤어디자이너'];
const 직업의종류 = new Set(모인사람들의직업);
console.log(직업의종류.size);

//4

 

 

has메서드를 이용하면 해당 값을 가지고 있는지 확인할 수 있다.  - set.has()

console.log(직업의종류.has('개발자'));
console.log(직업의종류.has('농구선수'));

//true
//false

 

더하기(add), 빼기(delete), 싹다지우기(clear)도 가능하다.  - set.add(), set.delete(), set.clear()

직업의종류.add('축구선수');
직업의종류.add('아나운서');
//Set(6) {"디자이너", "개발자", "마케터", "헤어디자이너","축구선수","아나운서"}


직업의종류.delete('개발자');
//Set(5) {"디자이너", "마케터", "헤어디자이너","축구선수","아나운서"}

직업의종류.clear():
//ƒ clear() { [native code] }

 

 

 

이번에는 set으로 받은 값을 바로 배열의 형태로 저장해보겠다. spread를 이용하면 된다. [...new Set()]

const 모인사람들의직업 = [
  '디자이너',
  '개발자',
  '마케터',
  '개발자',
  '디자이너',
  '헤어디자이너',
];
const 직업의종류 = [...new Set(모인사람들의직업)];
console.log(직업의종류);

//(4) ["디자이너", "개발자", "마케터", "헤어디자이너"]