변환기: 강력한 기능 구성 패턴

alias:: Transducer: 강력한 함수 구성 패턴
노트북:: 변환기: 一种强大的函数组同模式

맵 및 필터

맵의 의미는 '매핑'입니다. 이는 세트의 모든 요소에 대해 한 번 변환을 수행한다는 의미입니다.

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

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]

  function map(f, xs) {
    const ret = []
    for (let i = 0; i 





<pre class="brush:php;toolbar:false">  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]

위에서는 맵의 구현이 컬렉션 유형에 의존한다는 것을 명확하게 표현하기 위해 의도적으로 for 문을 사용했습니다.
순차적 실행;
게으르지 않고 즉각적인 평가.
필터를 살펴보겠습니다.

  function filter(f, xs) {
    const ret = []
    for (let i = 0; i 





<pre class="brush:php;toolbar:false">  var range = n => [...Array(n).keys()]

  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]

마찬가지로 필터 구현도 특정 컬렉션 유형에 따라 달라지며 현재 구현에서는 xs가 배열이어야 합니다.
지도는 어떻게 다양한 데이터 유형을 지원할 수 있나요? 예를 들어 집합, 지도 및 맞춤 데이터 유형이 있습니다.
일반적인 방법이 있습니다. 컬렉션의 인터페이스(프로토콜)에 의존합니다.
언어마다 구현 방식이 다르며 JS는 이와 관련하여 기본 지원이 상대적으로 약하지만 실현 가능합니다.
Symbol.iterator를 사용하여 반복합니다.
생성자를 얻으려면 Object#contractor를 사용하세요.
그렇다면 푸시에서 다양한 데이터 유형을 추상적으로 지원하려면 어떻게 해야 할까요?
ramdajs 라이브러리를 모방하여 맞춤 @@transducer/step 함수를 사용할 수 있습니다.

  function map(f, xs) {
    const ret = new xs.constructor()  // 1. construction
    for (const x of xs) { // 2. iteration
      ret['@@transducer/step'](f(x))  // 3. collection
    }
    return ret
  }

  Array.prototype['@@transducer/step'] = Array.prototype.push
  // [Function: push]

  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]

  Set.prototype['@@transducer/step'] = Set.prototype.add
  // [Function: add]

  map(x => x + 1, new Set([1, 2, 3, 4, 5]))
  // Set (5) {2, 3, 4, 5, 6}

이 방법을 사용하면 지도, 필터 등 보다 축적인 기능을 구현할 수 있습니다.
핵심은 생성, 반복, 컬렉션과 같은 작업을 특정 컬렉션 클래스에 위임하는 것입니다. 왜냐하면 컬렉션 자체만이 이러한 작업을 완료하는 방법을 알고 있기 때문입니다.

  function filter(f, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (f(x)) {
        ret['@@transducer/step'](x)
      }
    }
    return ret
  }

  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]

  filter(x => x > 3, new Set(range(10)))
  // Set (6) {4, 5, 6, 7, 8, 9}

구성하다

위의 맵과 필터를 함께 사용하면 몇 가지 문제가 발생할 수 있습니다.

  range(10)
    .map(x => x + 1)
    .filter(x => x % 2 === 1)
    .slice(0, 3)
  // [ 1, 3, 5 ]

5개의 요소만 사용되지만 컬렉션의 모든 요소가 순회됩니다.
각 단계에서는 중간 컬렉션 개체가 생성됩니다.
우리는 Compose를 사용하여 이 로직을 다시 구현합니다

  function compose(...fns) {
    return fns.reduceRight((acc, fn) => x => fn(acc(x)), x => x)
  }

합성을 지원하기 위해 맵, 필터 등의 기능을 카레 형태로 구현합니다.

  function curry(f) {
    return (...args) => data => f(...args, data)
  }

  var rmap = curry(map)
  var rfilter = curry(filter)

  function take(n, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (n 





<pre class="brush:php;toolbar:false">  take(3, range(10))
  // [ 0, 1, 2 ]

  take(4, new Set(range(10)))
  // Set (4) {0, 1, 2, 3}

  const takeFirst3Odd = compose(
    rtake(3),
    rfilter(x => x % 2 === 1),
    rmap(x => x + 1)
  )

  takeFirst3Odd(range(10))
  // [ 1, 3, 5 ]

지금까지 구현한 내용은 표현이 명확하고 간결하지만 런타임에는 낭비입니다.

함수의 형태

변신 로봇

curry 버전의 지도 기능은 다음과 같습니다.

  const map = f => xs => ...

즉, map(x => ...)는 단일 매개변수 함수를 반환합니다.

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

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]

하나의 매개변수로 함수를 쉽게 구성할 수 있습니다.
구체적으로 이들 함수의 입력은 '데이터', 출력은 가공된 데이터, 함수는 데이터 변환기(Transformer)이다.

  function map(f, xs) {
    const ret = []
    for (let i = 0; i 





<pre class="brush:php;toolbar:false">  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]

  function filter(f, xs) {
    const ret = []
    for (let i = 0; i 



<p>Transformer는 단일 매개변수 함수로 함수 구성에 편리합니다.<br>
</p>

<pre class="brush:php;toolbar:false">  var range = n => [...Array(n).keys()]

감속기

리듀서는 더 복잡한 논리를 표현하는 데 사용할 수 있는 2개의 매개변수 함수입니다.

  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]

합집합

  function map(f, xs) {
    const ret = new xs.constructor()  // 1. construction
    for (const x of xs) { // 2. iteration
      ret['@@transducer/step'](f(x))  // 3. collection
    }
    return ret
  }

지도

  Array.prototype['@@transducer/step'] = Array.prototype.push
  // [Function: push]

  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]

필터

  Set.prototype['@@transducer/step'] = Set.prototype.add
  // [Function: add]

가져가다

take를 어떻게 구현하나요? Break와 유사한 기능을 가지려면 Reduce가 필요합니다.

  map(x => x + 1, new Set([1, 2, 3, 4, 5]))
  // Set (5) {2, 3, 4, 5, 6}

  function filter(f, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (f(x)) {
        ret['@@transducer/step'](x)
      }
    }
    return ret
  }

  filter(x => x % 2 === 1, range(10))
  // [ 1, 3, 5, 7, 9 ]

변환기

드디어 우리의 주인공을 만나다
먼저 이전 지도 구현을 다시 검토하세요

  filter(x => x > 3, new Set(range(10)))
  // Set (6) {4, 5, 6, 7, 8, 9}

위에서 언급한 배열(Array)에 의존하는 로직을 분리하여 감속기로 추상화하는 방법을 찾아야 합니다.

  range(10)
    .map(x => x + 1)
    .filter(x => x % 2 === 1)
    .slice(0, 3)
  // [ 1, 3, 5 ]

구축도 사라지고, 반복도 사라지고, 요소의 수집도 사라졌습니다.
리듀서를 통해 지도에는 담당하는 로직만 포함됩니다.
필터를 다시 살펴보세요

  function compose(...fns) {
    return fns.reduceRight((acc, fn) => x => fn(acc(x)), x => x)
  }

위의 rfilter와 rmap의 반환 유형을 확인하세요.

  function curry(f) {
    return (...args) => data => f(...args, data)
  }

실제로는 매개변수와 반환 값이 모두 감소기인 변환기입니다.
Transformer는 구성 가능하므로 Transducer도 구성 가능합니다.

  var rmap = curry(map)
  var rfilter = curry(filter)

  function take(n, xs) {
    const ret = new xs.constructor()
    for (const x of xs) {
      if (n 



<h2>
  
  
  변환 및 변환
</h2>

<p>그런데 변환기는 어떻게 사용하나요?<br>
</p>

<pre class="brush:php;toolbar:false">  take(3, range(10))
  // [ 0, 1, 2 ]

  take(4, new Set(range(10)))
  // Set (4) {0, 1, 2, 3}

리듀서를 이용하여 반복과 수집을 구현해야 합니다.

  const takeFirst3Odd = compose(
    rtake(3),
    rfilter(x => x % 2 === 1),
    rmap(x => x + 1)
  )

  takeFirst3Odd(range(10))
  // [ 1, 3, 5 ]

이제 작동할 수 있으며 반복이 '주문형'이라는 점도 확인했습니다. 컬렉션에 100개의 요소가 있지만 처음 10개의 요소만 반복되었습니다.
다음으로 위의 논리를 함수로 캡슐화하겠습니다.

  const map = f => xs => ...

  type Transformer = (xs: T) => R

흐름

피보나치 생성기.

비동기 무한 피보나치 생성기와 같은 일종의 비동기 데이터 수집이 있다고 가정해 보겠습니다.

  data ->> map(...) ->> filter(...) ->> reduce(...) -> result

  function pipe(...fns) {
    return x => fns.reduce((ac, f) => f(ac), x)
  }

  const reduce = (f, init) => xs => xs.reduce(f, init)

  const f = pipe(
    rmap(x => x + 1),
    rfilter(x => x % 2 === 1),
    rtake(5),
    reduce((a, b) => a + b, 0)
  )

  f(range(100))
  // 25

위 데이터 구조를 지원하는 into 함수를 구현해야 합니다.
참고로 코드의 배열 버전을 옆에 게시하세요.

  type Transformer = (x: T) => T

구현 코드는 다음과 같습니다.

  type Reducer = (ac: R, x: T) => R

수집 작업은 동일하지만 반복 작업은 다릅니다.

  // add is an reducer
  const add = (a, b) => a + b
  const sum = xs => xs.reduce(add, 0)

  sum(range(11))
  // 55

다른 데이터 구조에도 동일한 논리가 적용됩니다.

명령

주의 깊게 보시면 카레 기반의 Compose 버전과 리듀서 기반 버전의 매개변수 순서가 다르다는 것을 아실 수 있을 것입니다.

카레 버전

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

  list.map(x => x + 1)
  // [ 2, 3, 4, 5, 6 ]

  function map(f, xs) {
    const ret = []
    for (let i = 0; i 



함수 실행은 오른쪽 결합입니다.


  
  
  변환기 버전




  map(x => x + 1, [1, 2, 3, 4, 5])
  // [ 2, 3, 4, 5, 6 ]






  function filter(f, xs) {
    const ret = []
    for (let i = 0; i 



<h2>
  
  
  참조
</h2>

<p>트랜스듀서 등장<br>
변환기 - Clojure 참조</p>


          

            
        

위 내용은 변환기: 강력한 기능 구성 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!