매핑된 배열 대칭 차이

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 대칭 차이 (symmetric difference) 의 개념과 JavaScript 에서 symmetricDifferenceBy() 함수를 사용하여 이를 구현하는 방법을 살펴봅니다. 이 함수가 두 배열의 각 요소에 제공된 함수를 적용한 후 두 배열 간의 고유한 값을 찾는 데 어떻게 사용될 수 있는지 알아보겠습니다. 이 랩은 이 강력한 JavaScript 메서드를 더 잘 이해하고 자체 프로젝트에서 어떻게 사용할 수 있는지 돕기 위해 설계되었습니다.

매핑된 배열 대칭 차이 (Mapped Array Symmetric Difference)

코딩을 시작하려면 터미널/SSH 를 열고 node를 입력하세요.

이 함수는 제공된 함수를 두 배열의 각 요소에 적용한 후 두 배열 간의 대칭 차이를 반환합니다. 작동 방식은 다음과 같습니다.

  • fn을 적용한 후 각 배열의 고유한 값을 얻기 위해 각 배열에서 Set을 생성합니다.
  • 각 배열에서 Array.prototype.filter()를 사용하여 다른 배열에 포함되지 않은 값만 유지합니다.

symmetricDifferenceBy 함수의 코드는 다음과 같습니다.

const symmetricDifferenceBy = (a, b, fn) => {
  const sA = new Set(a.map((v) => fn(v))),
    sB = new Set(b.map((v) => fn(v)));
  return [
    ...a.filter((x) => !sB.has(fn(x))),
    ...b.filter((x) => !sA.has(fn(x)))
  ];
};

symmetricDifferenceBy는 다음과 같이 사용할 수 있습니다.

symmetricDifferenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [ 1.2, 3.4 ]
symmetricDifferenceBy(
  [{ id: 1 }, { id: 2 }, { id: 3 }],
  [{ id: 1 }, { id: 2 }, { id: 4 }],
  (i) => i.id
);
// [{ id: 3 }, { id: 4 }]

요약

축하합니다! 매핑된 배열 대칭 차이 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.