JavaScript) 객체(Object) 내 배열에서 중복 값 찾아서 제거하기

객체 내부에서 중복 값 찾기. 

 

예를 들면 아래 같은 객체에서 id가 100으로 같은 배열 중 최근에 만든 것만 살리기!

let exArr = [
    { id: 99, text:'가', regdate:'2023-08-09' }, 
    { id: 100, text:'나', regdate:'2023-08-10' }, 
    { id: 100, text:'다', regdate:'2023-08-11' }
];

 

세가지 방법이 있다. 반복문돌려서 찾기,  reduce,  filter

 

 

1. 반복문 돌려서 찾기

원초적인(?) 방법으로 반복문을 돌려서 같은 값이 있는 맵을 따로 빼두고 제거하는 방법이다. 

let prevIdx = 0;

for(let i=1; i<exArr.length; i++) {
  if(exArr[i].id == exArr[prevIdx].id) {
    exArr.splice(i, i);
  }
  prevIdx = i
}
console.log("결과: ", exArr)

** 하지만 splice로 삭제하게 되면 배열이 중간에 사라져서 인덱스가 엇갈려 모든 요소를 다 볼 수 없게된다.

    따라서 제일 마지막꺼를 삭제하거나 하지 않는 한 비추천한다. 

 

 

 

2. reduce 를 사용하기

⚝ 자바스크립트 reduce() 함수

 reduce는 "줄이다" 라는 뜻으로, 배열의 각 요소에 대해 주어진 함수를 실행하고 반환한다. 

 reduce 함수의 인자값 : acc(누적되는 배열), cur(현재값), idx(현재인덱스), src(원본배열)

 acc는 처음에 빈배열로 시작하여 reduce함수가 반복되면서 제거될 배열 제거하고 acc에 쌓인다. 

 

⚝ 자바스크립트 findIndex() 함수

 해당 조건을 만족하는 첫번째 인덱스를 반환하며, 만족하는 요소가 없으면 -1을 반환합니다.

 

위 두개를 합치면 아래 코드가 되는데,

exArr 배열을 반복하면서 같은 id값이 없으면 -1를 반환하여 acc에 추가(push)한다. 

id부분에 비교하고싶은 키값을 바꾸면된다. 

let res = exArr.reduce((acc, current) => {
      if(acc.findIndex(({id}) => id === current.id) === -1) {
        acc.push(current); 
      }

      return acc;
}, [])

console.log("결과: ", res)

 

 

 

3. filter 를 사용하기

⚝ 자바스크립트 filter() 함수

   주어진 조건 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 

 

⚝ filter() 의 3번째 인자 callback() 함수

   true를 반환하면 요소를 유지하고, false를 반환하면 버린다.

   arr(현재 처리할 요소), index(현재 인덱스)

let res = this.exArr.filter(
      (arr, index, callback) => { index === callback.findIndex(t => t.id === arr.id) }
);

console.log("결과: ", res)

 

 

 

⚝ 추가로, 배열 중 중복되는 가장 마지막 요소가 삭제되니

 

특정 날짜 기준으로 자르고 싶다면 제거 하기 전 미리 정렬을 해놔야한다. 

 

나같은 경우는, 최근에 등록된게 남도록 하고 싶어서 regdate를 정렬했다. 

exArr = exArr.sort((a, b) => { return new Date(b.regdate) - new Date(a.regdate) });

날짜 기준으로 정렬하기!!