[React/JS] 요소가 Object인 배열의 중복 제거하기

필터(Filter)

---

01. 기본

  const data = ["A", "B", "C", "D", "A", "C"];
  const result = data.filter((value, index) => {
    return data.indexOf(value) === index; // 처음으로 나오는 값의 인덱스와 현재 인덱스가 같을 시, 포함
  });

특정 문자 위치를 찾는 indexOf 함수를 사용합니다.✨

 

 

02. 요소가 Object

  const data = [
    { name: "A", age: "20" },
    { name: "B", age: "24" },
    { name: "C", age: "20" },
    { name: "A", age: "20" },
    { name: "D", age: "24" }
  ];
  const result = data.filter((value, index, arr) => {
    return (
      arr.findIndex(
        (item) => item.name === value.name && item.age === value.age
      ) === index
    );
  });
  
  console.log(result);
  // [{name:'A',age:'20'}, {name:'B',age:'24'}, {name:'C',age:'20'}, {name:'D',age:'24'}]

조건에 일치하는 요소의 인덱스를 반환하는 findIndex 함수를 사용합니다.✨

 

 

 

 

셋(Set) 과 ...(확산 연산자)

---

01. 기본

  const data = ["A", "B", "C", "D", "A", "C"];
  const result = [...new Set(data)];
  console.log(result); // ['A', 'B', 'C', 'D']

Set을 이용하여 중복 제거합니다. 😁

 

 

02. 요소가 Object

  const data = [
    { name: "A", age: "20" },
    { name: "B", age: "24" },
    { name: "C", age: "20" },
    { name: "A", age: "20" },
    { name: "D", age: "24" }
  ];
  const result = [...new Set([...data].map(JSON.stringify))].map(JSON.parse);

  console.log(result);
  // [{name:'A',age:'20'}, {name:'B',age:'24'}, {name:'C',age:'20'}, {name:'D',age:'24'}]

객체는 JSON 형태로 비교하며, 객체의 속성이 1개만 있거나 객체 값이 완전히 같은 것을 중복 제거 할 경우만 new Set을 써야합니다.

 

 

🔥🔥