배열 내 객체(Object) 중복 id 값 제거

📌배열 내 객체(Object) 중복 id 값 제거 3가지 방법

안녕하세요 TriplexLab입니다. 👋👋

오늘은 배열 내 객체 프로퍼티 값 중에 중복으로 들어간 것을 제거하는 작업은 필수입니다.
여러 가지 방법으로 해결해보겠습니다.

// id가 중복되는 것을 제거하시오 
let example = [
	{ id: 123, Text:'AAA' }, 
    { id: 456, Text:'BBB' }, 
    { id: 123, Text:'CCC' }
];

//item을 localStorage에 저장합니다.
function save(name, val) {
    typeof(Storage) !== 'undefined' && localStorage.setItem(name, JSON.stringify(val));
};

//item을 localStorage에 있는 값을 조회합니다.
function get(name){
	return JSON.parse(localStorage.getItem(name));
}

 

---

📌 reduce

accumulator를 이용하여 중복 제거합니다.

const newArray = example.reduce(function(acc, current) {
  if (acc.findIndex(({ id }) => id === current.id) === -1) {
    acc.push(current);
  }
  return acc;
}, []);

save('name', newArray);

결과) 중복제거 되어 저장된 모습.

 

📌 filter

👉 1) 번

const newArray = example.filter((item, i) => {
  return (
    example.findIndex((item2, j) => {
      return item.id === item2.id;
    }) === i
  );
});

save('name', newArray);

👉2) 번

filter에는 3번째 인자로 callback 함수가 들어갑니다. 이것을 이용한 방법

const newArray = example.filter(
  (arr, index, callback) => index === callback.findIndex(t => t.id === arr.id)
);

save('name', newArray);

결과) 1,2번 모두 중복제거 되어 저장된 모습.

 

📌 new Set()

Set을 이용하여 중복 제거합니다.
하나의 단점이 있습니다.
id가 같으나, 다른 속성이 있다면, 중복이라 생각하지 않고 리턴합니다. 아래와 같은 경우입니다.

const newArray = [...new Set(example.map(JSON.stringify))].map(JSON.parse);

save('name', newArray);

결과) 중복 제거 안된 모습.

즉, new Set은 객체의 속성이 1개(배열의 원소들)만있을 경우 써야 합니다.
아래와 같은 경우입니다.

const example2 = ['AAA', 'BBB', 'CCC', 'AAA', 'AA']; 

const newArray = [...new Set(example2.map(JSON.stringify))].map(JSON.parse); 
save('name', newArray);

결과) 중복제거 되어 저장된 모습.