JS에서 리듀스 메소드를 사용하는 5가지 방법

최신 JavaScript 표준은 배열에 대한 "스마트"무차별 대입을 위한 많은 방법을 제공합니다. 가장 인기 있는 것은 forEach, for 또는 for...of입니다. 배열을 반복하고 각 요소에 대한 데이터를 반환해야 하는 경우 맵이 적합합니다.

배열을 살펴보고 예를 들어 모든 값을 요약하거나 평균을 찾거나 중간 작업을 수행해야 하는 경우 축소 방법을 사용하는 것이 좋습니다.

이 기사에서 어떤 시나리오에서 사용할 수 있습니까?

Reduce collapses the array to one value (reducets). This value can be any type of data - both primitive and composite, for example, an array.

이 메서드는 두 가지 인수를 허용합니다.

배열의 각 요소를 실행하기 위해 수행되는 콜백 함수;

initialValue의 초기 값입니다.
콜백은 또한 다른 요소를 방문한 후 콜백 함수를 반환하는 accumulator와 currentValue 루프의 현재 요소라는 두 가지 인수를 허용합니다.

write less, do more 원칙을 고수하는 데 도움이 되는 reduce 메서드의 명확하지 않은 몇 가지 응용 프로그램을 고려해 보겠습니다.

배열의 최소값과 최대값

최소값과 최대값을 찾으려면 Math API를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

const array = [-11, 2, 21, 3];
const max = Math.max(...array); // 21
const min = Math.min(...array); // -11

그러나 큰 배열(~10^7)을 사용하는 경우 오류가 발생할 수 있습니다. 축소 방법을 사용하여 이러한 문제를 제거하고 원하는 결과를 얻을 수 있습니다.

const array = [-11, 2, 21, 3];
const max = array.reduce((max, num) => (max > num ? max : num)); // 21
const min = array.reduce((min, num) => (min < num ? min : num)); // -11

GET URL의 매개변수를 구문 분석하고 객체에 추가해야 할 수 있습니다.

const parseQuery = () => {
  const url = new URL("https://ranbow1.xyz?name=hello&title=world");
  const search = url.search;
  let query = {};
  search
    .slice(1)
    .split("&")
    .forEach((item) => {
      const [key, value] = item.split("=");
      query[key] = decodeURIComponent(value);
    });
  return query;
};
// {name: "hello", title: "world"}

그러나 reduce 메서드를 사용하면 모든 것이 더 명확해지고 예측 가능해집니다.

const parseQuery = () => {
  const url = new URL("https://ra1nbow.xyz?name=hello&title=world");
  const search = url.search;
  return search
    .replace(/(^?)|(&$)/g, "")
    .split("&")
    .reduce((query, item) => {
      const [key, value] = item.split("=");
      query[key] = decodeURIComponent(value);
      return query;
    }, {});
};
// {name: "hello", title: "world"}

작동 방식은 다음과 같습니다.

URL에서 검색 매개변수 가져오기 - https://ra1nbow.xyz ? 이름=안녕하세요&제목=세계

const search = url.search;  // ?name=hello&title=world

불필요한 문자 제거

search.replace(/(^?)|(&$)/g, "");
//?name=hello&title=world => name=hello&title=world

reduce를 사용하여 개체에 매개 변수를 수집합니다

.

매개변수 역직렬화

이 예에서는 상황이 반대입니다. 링크에 일련의 매개변수를 추가해야 하는 경우, 특히 이러한 매개변수가 수십 또는 수백 개 있는 경우 연결(접착선)을 사용하는 것이 그리 편리하지 않습니다. 이로 인해 코드의 가독성이 크게 떨어지고 새 매개변수가 추가될 때마다 줄 크기가 늘어나 추가 지원이 어려워집니다.

const searchObj = {
  name: 'hello',
  title: 'world',
}; // many others parameters
const link = `https://ra1nbow.xyz?name=${searchObj.name}&age=${searchObj.title}`;

축소 방법을 사용하여 상황을 수정할 수 있습니다. 우선 다음과 같이 함수를 작성합니다.

const stringifySearch = (search = {}) => {
  return Object.entries(search)
    .reduce(
      (t, v) =>     `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
      Object.keys(search).length ? '?' : ''
    )
    .replace(/&$/, '');
};

다음으로 이전에 설명한 예제에서 개체를 가져와 적용합니다.

const searchObj = {
  name: 'hello',
  title: 'world',
}; // many others parameters
const search = stringifySearch(searchObj);
const link = `https://ra1nbow.xyz${search}`; // https://ra1nbow.xyz?name=hello&title=world

이제 개체를 변경할 때 후속 코드가 제대로 작동하지 않을까 걱정할 필요가 없습니다.

배열의 고유 요소 선택

간단합니다. 배열을 살펴보고 이미 그러한 의미가 있는지 찾습니다. 없으면 추가하고 있으면 더 진행합니다. 따라서 출력은 고유한 값의 배열이 됩니다.

const someArray = [1, 2, 1, 2, -1, 10, 11];
const uniqueArray = someArray.reduce(
  (acc, item) => (acc.includes(item) ? acc : [...acc, item]),
  []
); // [1, 2, -1, 10, 11]

배열의 동일한 요소 수 결정

배열의 각 요소 수를 얻기 위해 Map을 추가로 사용합니다. 이것은 Object뿐만 아니라 키 값의 모음입니다.

주요 차이점은 맵에서 다른 유형(숫자/행)의 값을 사용하는 배열로 작업할 수 있다는 것입니다.

const count = (array) => {
  return array.reduce(
    (acc, item) => (acc.set(item, (acc.get(item) || 0) + 1), acc),
    new Map()
  );
};
const array = [1, 2, 1, 2, -1, 0, 0, 10, 10, 6];
console.log(count(array)); // Map(6) {1 => 2, 2 => 2, -1 => 1, 0 => 2, 10 => 2, 6 => 1}

여러 개체 속성 가져오기

이러한 시나리오는 일상 업무에서 자주 발생합니다. 예를 들어 보겠습니다.

많은 속성을 가진 개체가 있습니다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
  // ...
}

우리는 이전 객체의 일부 속성을 가져와 새 객체를 생성하려고 합니다.

const newObj = {
  a: obj.a,
  b: obj.b,
  c: obj.c,
  d: obj.d
  // ...
}

그다지 효과적이지 않은 것 같죠?

문제를 더 쉽게 해결할 수 있도록 작은 도우미를 작성해 보겠습니다.

const getObjectKeys = (obj = {}, keys = []) => {
  return Object.keys(obj).reduce(
    (acc, key) => (keys.includes(key) && (acc[key] = obj[key]), acc),
    {}
  );
};

물론 모든 것이 어떻게 작동하는지 확인합시다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
  // ...
}
const newObj = getObjectKeys(obj, [ 'a', 'b', 'c', 'd' ])
console.log(newObj) // {a: 1, b: 2, c: 3, d: 4}

이것은 일상적인 작업에 방법을 적용하기 위한 가능한 시나리오의 일부일 뿐입니다. 자신에게 흥미로운 것을 찾았기를 바랍니다.

많은 관심과 행복한 코딩에 감사드립니다!

My Github <3