[JS] 배열에서 중복 값 제거하기

 

기본값

javascript
// 배열안에 값
const arr1 = [1, 2, 3, 4, 5, 1, 3, 5]

// 배열안에 객체
const arr2 = [{name: "레드"}, {name: "그린"}, {name: "블루"}, {name: "레드"}, {name: "블루"}]

해당 값과 같이 배열에 중복된 값이 들어 있는 경우, 중복된 값을 제거하는 방법을 소개하겠습니다.

 

첫 번째 방법 ( Set )

javascript
const result = [...new Set(arr1)];

// [1, 2, 3, 4, 5]

Set 객체 내 값은 하나만 나타날 수 있습니다. 즉 어떤 값이 든 유일하게 만들어주는 검사를 진행합니다.

이를 이용하여 Set 객체를 생성할 때 배열을 넣어주면 중복된 값이 사라집니다.

 

Set 객체를 이용했기에 다시 배열의 형태로 바꿔줍니다.

 

javascript
const result = [...new Set(arr2)];

// [{name: "레드"}, {name: "그린"}, {name: "블루"}, {name: "레드"}, {name: "블루"}]


const result = [...new Set( arr2.map(v => v.name) )];

// ["레드", "그린", "블루"]

하지만 해당 방법은 객체를 담은 배열의 중복 값을 제거하기에는 어려움이 생깁니다.

그러므로 Object 형태가 아닌 해당 객체에서 특정 값을 뽑아 제거해야 하는 어려움이 생깁니다.

 

두 번째 방법 ( Filter )

javascript
// item , index
const result = arr1.filter((v, i) => arr1.indexOf(v) === i);

// [1, 2, 3, 4, 5]

해당 방법은 indexOf 메서드를 이용하여 배열에서 첫 번째에 해당하는 Index를 반환하는 특성을 이용,

해당하는 값을 찾아서 현재 비교하려는 값이 첫 번째로 해당하는 값인지 비교하여 중복 값을 제거해 줄 수 있습니다.

 

javascript
const result = arr2.filter((v, i) => 
  arr2.findIndex(x => x.name === v.name) === i);
  
// [ {name: "레드"}, {name: "그린"}, {name: "블루"} ]

해당 방법은 Set 방식과 다르게 객체가 들어있는 배열에서도 활용할 수 있습니다.

 

indexOf 메서드는 객체의 값 까지는 판단하지 못하므로 findIndex 메서드를 이용하여 객체의 특정 값을 지정하여 

해당 값의 첫 번째 위치를 찾아 비교해줍니다.

 

세 번째 방법 ( Reduce )

javascript
const result = arr1.reduce((acc, v) => {
  return acc.includes(v) ? acc : [...acc, v];
}, []);

// [1, 2, 3, 4, 5]

해당 방법은 reduce 메서드를 이용하여 새로운 배열을 만들어 중복되는 값을 검사하여

중복되지 않은 값이 들어간 배열을 생성하여 반환해줍니다.

 

javascript
const result = arr2.reduce((acc, v) => {
    return acc.find(x => x.name === v.name) ? acc : [...acc, v];
}, []);

// [ {name: "레드"}, {name: "그린"}, {name: "블루"} ]

해당 방법은 객체가 들어있는 배열에서도 사용할 수 있는 방법이며,

includes 부분을 find, findIndex 등 객체의 요소를 비교할 수 있는 메서드로 대체하여 사용할 수 있습니다.

 

참고자료

https://gurtn.tistory.com/78

[JS] 배열 특정 값 찾기 ( find, findIndex, filter )