[JS] Set | 객체가 들어있는 배열에서 중복되는 값을 지워줘~

💡 Set 완전 100% 리얼 기초 문법 보기

 

[JS] Set | 배열에서 중복되는 값 지워줘~

SetSet은 자바스크립트에서 기본적으로 지원하는 어쩌구 저쩌구 ...  배열에서 중복되는 값을 없애준다.  const arr = [1, 2, 2, 2, 2, 2, 2, 2, 3];const set = new Set(arr);console.log(set); // Set(3) { 1, 2, 3 } : 중복은

reactjy2.tistory.com


이전에 Set을 이용해서 배열의 중복되는 값을 제거하는 방법을 알아봤지만 사실 개발하다보면 저런 단순한 1차원 배열에 값만 띡띡 들어있는 데이터보다 조금 더 복잡한 형태의 데이터를 다루는 일이 많다. (아마도)

 

예를 들어 .. JSON으로 데이터를 처리할 때 대충 이렇게 생긴 것들을 흔히 볼 수 있는데 Set은 객체 형태의 데이터까지는 중복제거를 하지 못한다. (진짜임 궁금한 사람들은 한번 해보세요 되나 안되나)

const obj = [
    {
        id: 1,
        name: "홍길동",
        age: 123,
    },
    {
        id: 2,
        name: "이황",
        age: 123,
    },
    {
        id: 1,
        name: "홍길동",
        age: 123,
    },
]

 

그럼에도 불구하고 Set으로 저런거 중복 제거하기

보통 위와 같은 형태의 데이터는 고유해야하는 `id값`이 있을 것이다. 없으면 다른거 아무거나 고유해야하는 아무 속성을 기준으로 하면 된다. 일단 예시 코드는 중복된 `id값`을 기준으로 중복 제거를 해보았다.

// 중복된 값이 있는지 비교해줄 Set
const set = new Set();

// filter()로 조건에 맞는(중복이 아닌) data만 newObj에 반환하기
const newObj = obj.filter(item => {
	// set.has(): set에 값이 있는지 확인 (true | false)
    const duplicate = set.has(item.id);
    // set.add(): set에 id값 넣어주기(어차피 중복 제거해줘서 일단 넣으면됨) 
    set.add(item.id);
	// 중복되는 값이 있었으면 (!true) => 반환하지 말어라
    return !duplicate;
})

console.log(newObj); // 출력 : 직접 해보셈

 

 

댓글

Designed by JB FACTORY