<div id="readability-page-1" class="page"><div role="banner"> <div> <h2>중복 객체 제거 하기</h2> <h4>18 Jul 2021</h4> <p> <i></i> Reading time ~1 minute </p> </div> <h2 id="중복-제거-하기">중복 제거 하기</h2> <p>단순한 숫자나 문자의 중복 제거는 Set을 이용하면 간단하게 처리 할 수 있습니다.</p> <div><pre><code>const list = ['1', '2', '3', '2', 1,2,3, 1,2,3];
// Set 을 이용한 방식
[...new Set(list)]
// filter를 이용한 방식
list.filter((item, index) =&gt; list.indexOf(item) === index);
// 결과
[ '1', '2', '3', 1, 2, 3 ]

</code></pre></div> <p>하지만, 객체의 중복제거의 경우는 조금 다른 방식으로 처리 해야 합니다.</p> <div><pre><code># 중복 제거가 안됨
const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];

list.filter((item, index) =&gt; list.indexOf(item) === index);

// 결과 
[ { a: 1, b: 2 }, { a: 2, b: 1 }, { a: 1, b: 2 } ]
</code></pre></div> <p>바로, JSON.stringify를 이용하는 방식입니다.</p> <div><pre><code>const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];

const uniqueList = [...new Set(list.map(JSON.stringify))].map(JSON.parse);
// 결과 
[ { a: 1, b: 2 }, { a: 2, b: 1 } ]
</code></pre></div> <p>다른 방식으로 key 값을 기준으로 unique 객체를 추출한다면 다음과 같은 방식으로도 가능합니다.</p> <div><pre><code>// a의 값이 key 인경우
const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];

list.filter((item, index) =&gt; {
    const key = item.a;
    return index === list.findIndex((e)=&gt; e.a === key);
});
</code></pre></div> <p>위의 방식이 일반적으로 많이 쓰이는 방식 입니다.</p> <h2 id="참고-자료">참고 자료</h2> <ul> <li><a href="https://dongmin-jang.medium.com/javascript-array-%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-es6-b5b9075361f9">[Javascript] array 중복 제거하는 방법(ES6)</a></li> <li><a href="https://javascript.plainenglish.io/the-easy-way-to-create-a-unique-array-of-json-objects-in-javascript-5634254b17aa">The easy way to create a unique array of JSON Objects in JavaScript</a></li> </ul>  </div></div>

lahuman

Daniel Lim

중복 제거 하기
단순한 숫자나 문자의 중복 제거는 Set을 이용하면 간단하게 처리 할 수 있습니다.
const list = ['1', '2', '3', '2', 1,2,3, 1,2,3];
// Set 을 이용한 방식
[...new Set(list)]
// filter를 이용한 방식
list.filter((item, index) => list.indexOf(item) === index);
// 결과
[ '1', '2', '3', 1, 2, 3 ]
하지만, 객체의 중복제거의 경우는 조금 다른 방식으로 처리 해야 합니다.
# 중복 제거가 안됨
const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];
list.filter((item, index) => list.indexOf(item) === index);
// 결과 
[ { a: 1, b: 2 }, { a: 2, b: 1 }, { a: 1, b: 2 } ]
바로, JSON.stringify를 이용하는 방식입니다.
const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];
const uniqueList = [...new Set(list.map(JSON.stringify))].map(JSON.parse);
// 결과 
[ { a: 1, b: 2 }, { a: 2, b: 1 } ]
다른 방식으로 key 값을 기준으로 unique 객체를 추출한다면 다음과 같은 방식으로도 가능합니다.
// a의 값이 key 인경우
const list = [{a:1, b:2}, {a:2, b:1}, {a:1, b:2}];
list.filter((item, index) => {
    const key = item.a;
    return index === list.findIndex((e)=> e.a === key);
});
위의 방식이 일반적으로 많이 쓰이는 방식 입니다.
참고 자료
[Javascript] array 중복 제거하는 방법(ES6)
The easy way to create a unique array of JSON Objects in JavaScript

중복 객체 제거 하기

댓글