Reduce를 사용하여 성능을 향상시키는 간단한 방법

너는 영사를 사용한 후에 필터를 따라가거나 반대로 매우 흔히 볼 수 있다는 것을 깨달았니?너는 만약 Reduce로 대체한다면, 너는 계산 시간을 절반으로 절약할 수 있다는 것을 아니?
우리는 우선 이 세 가지 수조 방법을 되돌아볼 것이다.이러한 내용이 만족스러우면 section 5 으로 이동하십시오.

카탈로그

Overview

Map

Filter

Reduce

Map + Filter = Reduce

Performance

개요

맵, filter, reduce는 모두 진열 원형상의 방법이다.그것들은 서로 다른 목적에 사용되지만, 모두 리셋을 사용하여 수조의 원소를 교체하는 것과 관련된다.

지도.

맵은 호출된 원래 배열과 길이가 같은 배열을 되돌려줍니다.3개의 매개변수를 포함할 수 있는 매개변수와 함수를 포함합니다.

교체할 현재 항목

현재 항목의 인덱스

원시 어레이

맵은 원래 배열을 변경하지 않고 새 배열을 생성하므로 다음 변수에 맵 값을 지정해야 합니다.

const nums = [10, 20, 30, 40, 50];

// assign value of map into result variable
const result = nums.map(function(item, index, arr) {});  // RIGHT

nums.map(function(item, index, arr) {}); // WRONG!

예를 들어 우리는 연수조가 하나 있는데, 우리는 이 몇 년을 대표하는 나이를 얻고 싶고, 우리는 원시 연수치를 보존하고 싶다.이것은 우리의 정수 그룹이 하나의 대상 그룹에 비추게 된다는 것을 의미한다. 각 대상은 두 가지 속성이 있는데 그것이 바로 연도와 나이이다.
예:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const ages = years.map(function(year) {
  const age = currentYear - year;

  // each element will now be an object with 2 values: year & age   
  return {
    year,
    age
  }
});

우리는 지금 다음과 같이 보이는 그룹ages가 있다.

ages = [
  {year: 1991, age: 29},
  {year: 1999, age: 21},
  {year: 2000, age: 20},
  {year: 2010, age: 10},
  {year: 2014, age: 6}
]

필터

듣자니, Filter는 우리가 원하는 요소를 하나의 그룹에서 새로운 그룹으로 필터링하고, 우리가 원하지 않는 모든 요소를 무시합니다.
3개의 매개변수를 포함할 수 있는 매개변수와 함수를 포함합니다.

교체할 현재 항목

현재 항목의 인덱스

원시 어레이

이 함수는 predicate 로 사용되며, 배열의 내용을 새로 분배된 변수로 되돌려줍니다.맵과 달리 Filter는 호출된 그룹의 길이와 같은 그룹을 되돌려 주지 않습니다.
맵과 마찬가지로 필터는 원시 그룹을 바꾸지 않기 때문에 필터의 값은 변수에 분배되어야 합니다.
예를 들어 사람들이 태어난 해를 대표하는 연도 수조가 있는데, 우리는 새로운 수조를 원한다. 그것은 단지 한 사람이 18세를 넘은 연도와 같은 것만 포함한다.
예:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const over18 = years.filter(function(year) {
  // if the year equates to over 18, then put that year
  // into our new over18 array
  return (currentYear - year) > 18;
});

우리는 지금 18세 이상의 그룹을 가지고 있는데, 보기에 이렇다.

over18 = [1991, 1999, 2000];

줄다

Reduce는 배열을 단일 값으로 축소합니다.이 값은 모든 JavaScript 유형일 수 있습니다.예를 들어 문자열이나 숫자, 심지어 그룹이나 대상.
두 개의 매개변수가 필요합니다.

4개의 매개변수가 있는 함수:
a, 에너지 축적기
b, 교체할 현재 항목
c, 현재 항목 인덱스
d, 소스 배열

우리가 되돌려주고 싶은 단일 값의 초기 값

맵과 필터와 마찬가지로,reduce는 원시 그룹과 변이하지 않기 때문에,reduce의 값은 변수에 분배되어야 합니다.
예:

const nums = [10, 20, 30, 40, 50];
const sum = nums.reduce(function(total, num) {
  total += num;

  return total;
}, 0);

console.log(sum);  // 150

이렇게 쓸 수도 있다.

const nums = [10, 20, 30, 40, 50];

const reducer = (total, num) => total += num;
const sum = nums.reduce(reducer, 0);

우리는 그룹,nums,reducer 함수를 초기화했습니다. 이 함수는 현재 총액에 숫자를 추가할 뿐입니다.그리고 우리는sum를 초기화하고 Reduce 방법을 호출하여 Reducer를 첫 번째 매개 변수로 전달하고 총액을 초기 값으로 설정합니다. 이 예에서 0입니다.0은 우리의 초기 값이기 때문에, 이것은 첫 번째 교체 기간의 토탈 값이 될 것이다.

매핑 + 필터 = 감소

맵, Filter,reduce의 역할, 그리고 그것들의 차이를 되돌아보았으니 이제 본고의 제목을 이해합시다.
프로그래밍에서, 수조의 요소를 필터링하고, 내용을 약간 바꾸기를 원할 수도 있습니다. 이것은 흔히 볼 수 있는 일입니다.나는 단어change를 사용한다. 왜냐하면 우리는 이런 방법을 사용하면 원시 그룹을 바꿀 수 없다는 것을 알고 있기 때문이다.
기억:

필터는 우리가 관심 있는 그룹의 요소를 보존하고 새로운 변수에 분배한다

영사는 항상 하나의 수조를 새로운 변수에 분배하는데, 이 변수의 길이는 그것을 호출하는 수조의 길이와 같다

그렇다면, Reduce를 사용하면 기본적으로 절반의 시간 안에 작업을 완성할 수 있을 때, 왜 필터와 맵을 호출합니까?
reduce를 사용하면 두 단계가 아닌 한 단계에서 필터와 맵 그룹에 필요한 작업을 완성할 수 있습니다.
예를 들어 우리는 사람들이 태어난 해를 대표하는 연수 그룹을 가지고 있다. 우리는 18세가 넘는 사람들을 보류하고 사람들의 나이를 계산하고 싶을 뿐이다.
예:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const reducer = (accumulator, year) => {
  const age = currentYear - year;

  if (age < 18) {
    return accumulator;
  }

  accumulator.push({
    year,
    age
  });

  return accumulator;
}

const over18Ages = years.reduce(reducer, []);

현재, 우리는 기본적으로 filter절과 map절의 예시를 reduce에 합친다.결과는 다음과 같습니다.

over18Ages = [
  {year: 1991, age: 29},
  {year: 1999, age: 21},
  {year: 2000, age: 20}
]

우리의 최초의 수조 years는 5개의 원소가 있는데, 만약 우리가 영사와 필터를 사용한다면, 우리는 10번의 교체를 완성하고, 5번의 교체와 같은 결과를 얻을 것이다.그러나 엔진 뚜껑 아래에서map,filter,reduce가 하는 일은 약간 다르다. 그러면 실제로 성능에 영향을 미칠까?

공연

극단적이고 비현실적이지만 간단한 예가 무엇을 보여 주는지 봅시다...

let arr = [];

// populate array with 100,000,000 integers
for (let i = 0; i < 100000000; i++) {
  arr.push(i);
}

// calculate time taken to perform a simple map,
// of multiplying each element by 2
const mapStart = performance.now();
const mapResult = arr.map((num) => num * 2);
const mapEnd = performance.now();

// calculate time taken to perform a simple filter,
// of only returning numbers greater than 10,000
const filterStart = performance.now();
const filterResult = mapResult.filter((num) => num > 10000);
const filterEnd = performance.now();

// calculate time taken to perform a simple reduce,
// of populating an array of numbers whose initial value
// is greater than 10,000, then doubling this number
// and pushing it to our total
const reduceStart = performance.now();
const reduceResult = arr.reduce((total, num) => {
  const double = num * 2;

  if (double <= 10000) {
    return total;
  }

  total.push(double);

  return total;
}, []);
const reduceEnd = performance.now();

console.log(`map time (ms): ${mapEnd - mapStart}`);
console.log(`filter time(ms): ${filterEnd - filterStart}`);
console.log(`reduce time(ms): ${reduceEnd - reduceStart}`);

// map time (ms): 2415.8499999903142
// filter time(ms): 3142.439999995986
// reduce time(ms): 3068.4299999993527

나는 극단적으로 100000000개의 정수를 하나의 그룹에 넣지만, 나는 몇 초 안에 당신에게 성능 차이를 보여주고 싶습니다.그 결과 리듀스를 사용하려면 필터 사용과 5.56초 안에 기본적으로 완성된 조작을 계산하는 데 3.14초가 걸리는 것으로 나타났다.이것은 단지 정수 그룹을 처리할 뿐이라는 것을 명심하세요.문자열이나 객체를 처리하면 계산 시간이 길어집니다.

결론

맵과 필터를 사용하는 것을 보았을 때, 혹은 반대로 Reduce를 사용해서 절반의 시간 안에 계산을 끝내는 것을 고려하십시오!프로그래머로서 당신은 이해득실을 따져야 한다. 성능 면에서 얻을 수 있는 장점을 고려하면 코드의 가독성을 잃을 수도 있다.
Reduce는 여러 가지 용례가 있는데, 이것은 단지 그 중의 하나일 뿐이다.
쾌락 프로그래밍😊
chuttersnap의 제목 사진