[JS] 배열 안의 객체 중복 제거

[{id: 'xxx', name:'xxx'}, {id:'aaa', name:'aaa'}, {id:'xxx', name:'xxx'}]  형태의 객체가 있을 때 중복 제거하는 법

 

Set 객체 사용: Set 객체를 사용하여 중복을 제거할 수 있습니다. 이 방법은 객체의 특정 키를 기준으로 중복을 제거할 때 유용합니다. 아래 예제에서는 id를 기준으로 중복을 제거합니다.

const arr = [
  {id: 'xxx', name: 'xxx'},
  {id: 'aaa', name: 'aaa'},
  {id: 'xxx', name: 'xxx'}
];

const uniqueArr = Array.from(new Set(arr.map(item => item.id)))
  .map(id => {
    return arr.find(item => item.id === id);
  });

console.log(uniqueArr);

 

Array.prototype.filter 메서드 사용: filter 메서드를 사용하여 중복을 제거할 수 있습니다. 이 방법은 조건을 설정하여 중복 항목을 필터링할 수 있습니다.

const arr = [
  {id: 'xxx', name: 'xxx'},
  {id: 'aaa', name: 'aaa'},
  {id: 'xxx', name: 'xxx'}
];

const uniqueArr = arr.filter((item, index, self) =>
  index === self.findIndex(t => t.id === item.id)
);

console.log(uniqueArr);

 

reduce 사용 : reduce는 배열을 순회하면서 누적 값을 만들어나가는 메서드로, 이를 이용해 중복을 제거할 수 있습니다.

const arr = [
  {id: 'xxx', name: 'xxx'},
  {id: 'aaa', name: 'aaa'},
  {id: 'xxx', name: 'xxx'}
];

const uniqueArr = arr.reduce((acc, current) => {
  // 현재 객체의 id가 누적 배열에 존재하는지 확인
  const x = acc.find(item => item.id === current.id);
  // 존재하지 않으면 누적 배열에 추가
  if (!x) {
    acc.push(current);
  }
  return acc;
}, []);

console.log(uniqueArr);

1. reduce 메서드를 사용하여 초기 값을 빈 배열 []로 설정합니다.
2. 각 항목을 순회하면서 누적 배열 acc에 현재 항목이 존재하는지 find 메서드를 사용하여 확인합니다.
3. 현재 항목의 id가 누적 배열에 존재하지 않으면 누적 배열에 추가합니다.
4. 최종적으로 중복이 제거된 배열 uniqueArr를 반환합니다.

+ reduce 사용하면서 추가로 궁금했던거

1. {abc_code: 123}가 들어있는 parameter 객체를 reduce 함수로 보내고 그 안에 있는 데이터에서 abc_code랑만 비교해서 efg_code값만 뽑아낼 수 있는지?

const data = [
  {abc_code: 123, efg_code: 'A'},
  {abc_code: 456, efg_code: 'B'},
  {abc_code: 123, efg_code: 'C'},
  {abc_code: 789, efg_code: 'D'},
  {abc_code: 123, efg_code: 'E'}
];

const param = {abc_code: 123};

const result = data.reduce((acc, current) => {
  if (current.abc_code === param.abc_code) {
    acc.push(current.efg_code);
  }
  return acc;
}, []);

console.log(result); // Output: ['A', 'C', 'E']

1. reduce 메서드를 사용하여 초기 값을 빈 배열 []로 설정합니다.
2. 각 항목을 순회하면서 current.abc_code가 param.abc_code와 일치하는지 확인합니다.
3. 일치하는 경우, 해당 항목의 efg_code 값을 누적 배열 acc에 추가합니다.
4. 최종적으로 조건을 만족하는 efg_code 값들의 배열 result를 반환합니다.

2. abc_code를 동적처리하는 방법은?

const data = [
  {abc_code: 123, efg_code: 'A'},
  {abc_code: 456, efg_code: 'B'},
  {abc_code: 123, efg_code: 'C'},
  {abc_code: 789, efg_code: 'D'},
  {abc_code: 123, efg_code: 'E'}
];

const param = {abc_code: 123};

// param 객체의 첫 번째 키를 동적으로 추출
const paramKey = Object.keys(param)[0];
const paramValue = param[paramKey];

const result = data.reduce((acc, current) => {
  if (current[paramKey] === paramValue) {
    acc.push(current.efg_code);
  }
  return acc;
}, []);

console.log(result); // Output: ['A', 'C', 'E']

1. param 객체의 첫 번째 키를 Object.keys(param)[0]를 사용하여 추출합니다.
2. 추출한 키를 사용하여 param 객체에서 값을 가져옵니다.
3. reduce 메서드를 사용하여 초기 값을 빈 배열 []로 설정합니다.
4. 각 항목을 순회하면서 동적으로 추출한 키(paramKey)의 값이 paramValue와 일치하는지 확인합니다.
5. 일치하는 경우, 해당 항목의 efg_code 값을 누적 배열 acc에 추가합니다.
6. 최종적으로 조건을 만족하는 efg_code 값들의 배열 result를 반환합니다.