지도와 축소의 주요 차이점

나는 두 가지 방법을 모두 사용했지만 두 가지 방법의 사용법에 대해 꽤 혼란 스럽습니다.

무엇인가 map할 수 있지만 reduce수 없습니다 그 반대는?

참고 : 두 가지 방법을 모두 사용하는 방법을 알고 있습니다.이 방법의 주요 차이점과 사용해야하는시기에 대해 질문하고 있습니다.

출처

모두 map와 reduce입력으로 배열 및 사용자가 정의하는 기능을 가지고있다. 그것들은 어떤면에서 보완 적입니다. map여러 요소의 배열에 대해 하나의 단일 요소를 반환 할 수 없지만 reduce결국 변경 한 누산기를 항상 반환합니다.

map

사용 map하여 요소를 반복하고 각 요소에 대해 원하는 요소를 반환합니다.

예를 들어 숫자 배열이 있고 그 제곱을 얻으려면 다음을 수행 할 수 있습니다.

// A function which calculates the square
const square = x => x * x

// Use `map` to get the square of each number
console.log([1, 2, 3, 4, 5].map(square))

reduce

배열을 입력으로 사용하면 accumulator및 current_element매개 변수 를 가져 오는 콜백 함수 (첫 번째 인수)를 기반으로 하나의 단일 요소 (객체, 숫자 또는 다른 배열)를 얻을 수 있습니다 .

const numbers = [1, 2, 3, 4, 5]

// Calculate the sum
console.log(numbers.reduce(function (acc, current) {
  return acc + current
}, 0)) // < Start with 0

// Calculate the product
console.log(numbers.reduce(function (acc, current) {
  return acc * current
}, 1)) // < Start with 1

둘 다 똑같은 일을 할 수 있다면 어떤 것을 선택해야합니까? 코드가 어떻게 보이는지 상상해보십시오. 제공된 예제의 경우 다음을 사용하여 언급 한대로 squares 배열을 계산할 수 있습니다 reduce.

// Using reduce
[1, 2, 3, 4, 5].reduce(function (acc, current) {
    acc.push(current*current);
    return acc;
 }, [])

 // Using map
 [1, 2, 3, 4, 5].map(x => x * x)

자, 이것들을 보면 분명히 두 번째 구현이 더 좋아 보이고 더 짧습니다. 일반적으로 더 깨끗한 솔루션을 선택합니다 map. 이 경우 . 물론으로 할 수는 reduce있지만 간단히 말해서 어느 것이 더 짧고 결국에는 더 좋을 것이라고 생각하십시오.

일반적으로 "맵"은 일련의 입력을 동일한 길이의 일련의 출력으로 변환하는 것을 의미하고 "감소"는 일련의 입력을 더 적은 수의 출력 으로 변환하는 것을 의미 합니다.

사람들이 "맵 축소"를 의미하는 것은 일반적으로 "변환, 가능하면 병렬로, 직렬로 결합"을 의미하는 것으로 해석됩니다.

당신은 "지도"를 할 때, 당신은 함수를 작성하고 그 변환 x에 f(x)새로운 값으로 x1. 당신이 "축소"할 때 당신 g(y)은 array를 취하고 array y를 방출하는 함수 를 작성하는 것 입니다 y1. 그들은 다른 유형의 데이터에 대해 작업하고 다른 결과를 생성합니다.

나는이 그림이 HOC의 차이점에 대해 당신에게 대답 할 것이라고 생각합니다.

이 map()함수는 입력 배열의 각 요소에 함수를 전달하여 새 배열을 반환합니다.

이것은 reduce()배열과 함수를 같은 방식으로 취하는 것과 다르지만 함수는 2누산기와 현재 값과 같은 입력을 받습니다 .

따라서 함수의 다음 출력 을 항상 누산기에 reduce()사용하는 것처럼 사용할 수 있습니다 . 그러나 배열의 차원을 줄이는 데 더 일반적으로 사용되므로 1 차원을 취하고 단일 값을 반환하거나 2 차원 배열을 평면화하는 등의 작업을 수행합니다.map().concat

이 두 가지를 하나씩 살펴 보겠습니다.

지도

Map은 콜백을 받아 배열의 모든 요소에 대해 실행하지만 고유하게 만드는 것은 기존 배열을 기반으로 새 배열을 생성한다는 것 입니다.

var arr = [1, 2, 3];

var mapped = arr.map(function(elem) {
    return elem * 10;
})

console.log(mapped); // it genrate new array

줄이다

배열 객체의 Reduce 메서드는 배열을 하나의 단일 값 으로 줄이는 데 사용됩니다 .

var arr = [1, 2, 3];

var sum = arr.reduce(function(sum, elem){
    return sum + elem;
})

console.log(sum) // reduce the array to one single value

map, filter 및 reduce의 차이점을 이해하려면 다음을 기억하십시오.

1. 세 가지 방법 모두 배열에 적용 되므로 배열에서 작업을 수행 할 때마다이 방법을 사용하게됩니다.
2. 세 가지 모두 기능적 접근 방식을 따르므로 원래 어레이는 동일하게 유지 됩니다. 원래 배열은 변경되지 않고 대신 새 배열 / 값이 반환됩니다.
3. Map 동일한 번호를 가진 새 배열을 반환합니다. 원래 배열에있는 요소의 수 . 따라서 원래 배열에 5 개의 요소가 있으면 반환 된 배열에도 5 개의 요소가 있습니다. 이 방법은 배열의 모든 개별 요소를 변경하고자 할 때마다 사용됩니다. ann 배열의 모든 요소가 출력 배열의 새로운 값에 매핑된다는 것을 기억할 수 있습니다. 따라서 이름은 map 다음과 같습니다.

var originalArr = [1,2,3,4]
//[1,2,3,4]
var squaredArr = originalArr.map(function(elem){
  return Math.pow(elem,2);
});
//[1,4,9,16]

4. Filter 원래 배열 과 같거나 적은 수의 요소를 가진 새 배열을 반환합니다 . 일부 조건을 통과 한 배열의 요소를 반환합니다. 이 방법은 원래 배열에 필터를 적용하고 싶을 때 사용됩니다 filter. 예를 들어,

var originalArr = [1,2,3,4]
//[1,2,3,4]
var evenArr = originalArr.filter(function(elem){
  return elem%2==0;
})
//[2,4]

5. Reduce맵 / 필터와 달리 단일 값을 반환합니다. 따라서 배열의 모든 요소에 대해 작업을 실행하고 모든 요소를 ​​사용하는 단일 출력을 원할 때마다 reduce. 배열의 출력이 단일 값으로 축소되므로 이름이 reduce. 예를 들어,

var originalArr = [1,2,3,4]
//[1,2,3,4]
var sum = originalArr.reduce(function(total,elem){
  return total+elem;
},0)
//10