[Javascript] 배열 중복 제거

배열 중복을 제거하는 3가지 방법

1. Set 객체

자바스크립트에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있다.

const dupArr = [1, 2, 3, 1, 2];

const set = new Set(dupArr);

const uniqueArr = [...set];

console.log(uniqueArr) // [1,2,3]

2. indexOf(), filter()

• indexOf() 함수는, 배열에서 특정값이 처음으로 나타나는 index를 리턴
• filter() 함수는, 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴

const dupArr = [1, 2, 3, 1, 2];

    const uniqueArr = dupArr.filter((element, index) => (
        dupArr.indexOf(element) === index
    ))

    console.log(uniqueArr) // [1,2,3]

3. forEach(), includes()

• forEach() 함수는 주어진 배열을 순회하면서, 배열의 원소들로 주어진 Callback함수 실행
• includes()함수는 주어진 배열에 특정 값이 포함되는지 여부 확인

const dupArr = [1, 2, 3, 1, 2];

    let uniqueArr = [];
    dupArr.forEach((element) => {
        if (!uniqueArr.includes(element)) {
            uniqueArr.push(element)
        }
    })
    console.log(uniqueArr) // [1,2,3]

프로젝트(Libertyform) 실제 적용 사례

const addAlluser = (e) => {
    const temp = state.filter((contact) => (contact.relationship === groupValue)).map((contact) => (contact.email))
    props.setUsers((prev) => ([...new Set([...prev, ...temp])]))
  }

설문조사 이메일 발송을 위해서 보내고자 하는 이메일을 저장하는 배열이 있습니다.
사용자는 원하는 사용자를 한명씩 개별로 선택 해 배열에 넣을 수 있고 그룹선택을 통해 한번에 배열에 넣을 수 있습니다.

예를들어 그룹에 홍길동, 김길동, 박길동이 있습니다.
개별로 홍길동, 김길동을 선택해 [홍길동, 김길동] 이런식으로 배열이 추가되었습니다.
여기에서 그룹 전체 선택을 누르면 배열은 [홍길동, 김길동, 홍길동, 김길동, 박길동] 이런식으로 변경되게 됩니다. 여기에서 중복된 사용자는 Set객체를 이용해서 중복을 제거하고 배열에 저장 할 수 있습니다.