Set과 Map

2022. 6. 30. 17:49·JavaScript
728x90
반응형

Set 객체는 중복되지 않는 유일한 값들의 집합이다

구분 배열 Set 객체
동일한 값을 중복하여 포함할 수 있다 O X
요소 순서에 의미가 있다 O X
인덱스로 요소에 접근할 수 있다 O X

Set은 수학적 집합을 구현하기 위한 자료구조다 ( 교집합 , 합집합등등)

Set 객체

중복은 존재불가 / 모든 값을 요소로 저장가능 / ===로 다른값도 set에서는 같다고 생각함

const set=new Set() // 빈 set 객체 생성

const set1=new Set([1,2,3,3]) // 중복된 3은 하나만 저장함
const set2=new Set(["hello"]) // "h" "e" "l" "o" 마찬가지로 중복값은 하나만

//중복 제거
const uni=arr=>[...new Set(arr)]

//요소 개수 확인
//Set.prototype.size 프로퍼티를 활용한다 (getter함수만 존재하는 접근자 프로퍼티)
//따라서 값 변경이 불가능하다
const {size}=new Set([1,2,3,4])

console.log(size); //3


// 요소 추가 Set.prototype.add 메서드를 활용
set.add(1) //제일위에 선언한 set에 1이 추가됨
set.add(2).add(3) //add 메소드는 새로운 요가 추가된 set객체를반환함 ->이런식으로 연속적 선언 가능

// 요소 순회 Set.prototype.forEach 메서드를 활용한다
// Set 객체는 이터러블이므로 for..of로 순회가능 -> 스프레드,디스트럭처링가능
인수 3개를 가지고 있고, 첫 번째 인수와 두 번째 인수는 현재 순회 중인 요소값
세 번째 인수는 현재 순회중인 Set 객체 자체를 받는다

const set=new Set([1,2,3])
set.forEach((v,v2,set))=>console.log(v,v2,set)

//집합 연산
Set.prototype.intersection=function(set){
  const result=new Set()
  //교집합
  for(const value of set){
    if(this.has(value)) result.add(value)
  }
  //for자리 대신해서
  //return new Set([...this].filter(v=>set.has(v)))
  return result
}

const setA=new Set([1,2,3,4,])
const setB=new Set([2,4])

console.log(setA.intersection(setB)); //Set(2) { 2, 4 }


  //합집합
  for(const v of set){
    result.add(v)
  }
  //for자리 대신해서
  return new Set([...this,...set])

  //차집합
  for(const mv of set){
    result.delete(mv)
  }
  //for자리 대신해서
  return new Set([...this].filter(v=>!set.has(v)))


//부분,상위집합

for(const v of set){
  //요소를 모두 포함하는가 확인
  if(!this.has(v))return false
}
return true

const supersetArr=[...this]
return [...set].every(v=>supersetArr.includes(v))

Map

Map객체는 키와 값의 쌍으로 이루어진 컬렉션이다. 객체와 유사

구분 객체 Map 객체
키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값
이터러블 X  O
요소 개수 확인 Object.keys(obj).length map.size

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어져야한다

const map=new Map() //빈 map 생성

const map1=new Map([['key1','value1'],['key2','value2']])

const map2=new Map(['key',1]) //에러

나머지 사용방법은 set과 비슷하므로 생략하겠다

728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

DOM/디바운스,스로틀  (0) 2022.07.07
브라우저의 렌더링 과정  (0) 2022.07.07
스프레드 문법/디스트럭처링 할당  (1) 2022.06.30
이터러블  (0) 2022.06.29
RegExp  (0) 2022.06.29
'JavaScript' 카테고리의 다른 글
  • DOM/디바운스,스로틀
  • 브라우저의 렌더링 과정
  • 스프레드 문법/디스트럭처링 할당
  • 이터러블
Hun-bot
Hun-bot
IT를 중심으로 다양한 것
  • Hun-bot
    로봇이 만드는 눈사람
    Hun-bot
  • 전체
    오늘
    어제
    • All Article (128)
      • Programmers (6)
        • TIP (1)
        • SQL (2)
        • LV1 (1)
        • LV2 (2)
        • LV3 (0)
      • Baekjoon (31)
        • Bronze (10)
        • Silver (19)
        • Gold (2)
        • Platinum (0)
        • Diamond (0)
      • Leetcode (0)
        • Easy (0)
        • Medium (0)
        • Hard (0)
        • SQL (0)
      • 알고리즘(Algorithm) (42)
      • JavaScript (40)
      • Linux (7)
      • JSP (1)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      오블완
      JS #프로그래머스 #숫자의표현 #알고리즘
      자바스크립트
      Algorithm
      JS #JavaScript #프로그래머스 #알고리즘
      Javascript
      JS #클래스
      프로그래머스
      JS #javascript #객체 #Object
      JS #JavaScript #프로그래머스 #카카오
      Programmers
      c++
      프로그래머스 #자바스크립트 #JS
      JavaScript #Set #Collection
      티스토리챌린지
      JSP #Vscode #톰켓 #Tomcat #Java #Web #jdk
      고득점 Kit
      SQL
      자바스크립트 #연습문제
      Python #알고리즘
      알고리즘 #Algorithm
      리눅스
      BaekJoon
      백준
      알고리즘
      LeetCode #JS #Javascript #Algorithm
      Vue #Vue.js #정리
      async await #js #문법 #자바스크립트 #비동기
      JS #정규표현식
      리눅스 #입문
    • 최근 댓글

    • hELLO· Designed By정상우.v4.10.3
    Hun-bot
    Set과 Map
    상단으로

    티스토리툴바

    티스토리툴바