>웹 프론트엔드 >JS 튜토리얼 >JavaScript 함수형 프로그래밍의 Compose 구현

JavaScript 함수형 프로그래밍의 Compose 구현

黄舟
黄舟원래의
2017-03-02 14:49:291754검색

이전 기사에서는 javascript 함수형 프로그래밍에서 curry(커링) 구현을 소개했습니다. 물론 그 커링은 제한된 매개변수가 생기면 시도해 보겠습니다. 무한한 매개변수를 추가하는 일종의 커링입니다. 이번에는 함수형 프로그래밍에서 또 다른 매우 중요한 함수인 javascript에 대해 주로 이야기하겠습니다. compose 함수의 역할은 함수를 연속적으로 결합하는 것입니다. 여러 함수. 한 함수의 출력은 다른 함수의 입력 매개변수가 됩니다. 첫 번째 함수가 실행되기 시작하면 실행이 도미노처럼 추론됩니다. compose

소개

예를 들어 이런 요구사항이 있을 경우 이름을 입력해야 하는데, 이 이름은

, firstName로 구성되며, 모두 이름을 출력합니다. 예를 들어 lastName, jack를 입력하면 smith로 출력됩니다. ‘HELLO,JACK SMITH’

이 문제를 해결하려면 함수 조합을 사용하는 것을 고려합니다.

, greetingtoUpper

var greeting = (firstName, lastName) => 'hello, ' + firstName + ' ' + lastName
var toUpper = str => str.toUpperCase()
var fn = compose(toUpper, greeting)
console.log(fn('jack', 'smith'))
// ‘HELLO,JACK SMITH’

요약하면 주목해야 할 점은 다음과 같습니다. 다음 몇 가지 사항:

  • 의 매개변수는 함수이고, 반환되는 것도 compose

  • 함수입니다. 첫 번째 함수에서 허용하는 매개변수까지, 나머지는 함수에서 허용하는 매개변수는 모두 이전 함수의 반환값이므로 초기 함수의 매개변수는

    이고, 의 허용값은 多元입니다. 다른 함수는 一元

  • compsoe입니다. 이 함수는 모든 매개 변수를 사용할 수 있으며, 실행 방향은 自右向左입니다. 最右面

이 세 가지 사항을 알고 나면 앞선 예제의 실행 과정을 쉽게 분석할 수 있습니다. 실행 결과는 fn('jack', 'smith')에 매개변수로 전달되고, greeting이 실행되어 최종 결과를 얻는데, Compose의 장점을 간단히 언급하자면, 처리 기능을 추가할 필요가 없습니다. toUpper을 수정하려면 toUpper만 실행하면 됩니다. 예를 들어 다른 fn을 추가하려면 compose

var trim = str => str.trim()
var newFn = compose(trim, fn)
console.log(newFn('jack', 'smith'))
trim만 하면 됩니다. 유지하고 확장하는 것이 매우 편리합니다.

구현

예제를 분석한 후 기본 원칙에 맞춰

가 어떻게 구현되는지 먼저 살펴보고 싶습니다.

함수형 프로그래밍의 두 가지 주요 라이브러리인 composejavascript가 어떻게 구현되는지 다시 살펴보세요. lodash.js의 구현 프로세스는 매우 기능적입니다. ramda.jsramda.js내 구현

함수가 도미노처럼 실행되기 때문에 처음에는 이것을 단계별로 구현해보자

는 것이 내 생각이다. 재귀 실행을 기록하려면

매개변수의 길이를 기록하고 반환된 함수에 compose라는 이름을 추가합니다. compose

var compose = function(...args) {
    var len = args.length
    return function f1() {

    }
}
len 함수 본문에서 해야 할 일은 f1에 있는 함수를 계속 실행하고, 이전 함수의 실행 결과를 다음 실행 함수의 입력 매개변수로 사용하는 것입니다. >

기능 목록 실행을 기록하기 위해 필요합니다.

var compose = function(...args) {
    var len = args.length
    var count = len - 1
    var result
    return function f1(...args1) {
        result = args[count].apply(this, args1)
        count--
        return f1.call(null, result)
    }
}
args물론 이것은 불가능합니다. 재귀적 종료 조건은 마지막 함수가 실행될 때, 즉 countargs일 때입니다. 이때 주의할 점은 재귀적으로 종료되면

커서가 초기 상태로 돌아가야 한다는 점입니다. 마지막으로

var compose = function(...args) {
        var len = args.length
        var count = len - 1
        var result
        return function f1(...args1) {
            result = args[count].apply(this, args1)
            if (count <= 0) {
                count = len - 1
                return result
            } else {
                count--
                return f1.call(null, result)
            }
        }
    }
count 코드를 추가하여 이 0 함수를 구현합니다. 나중에 반복을 사용하면 재귀를 완전히 구현할 수 있다는 것을 알게 되었습니다. 실제로 count 함수를 사용하면 이해하기 더 쉬운 것 같습니다.

composewhilelodash.js

구현 아이디어는 위와 동일하지만, 반복적으로 구현해 보도록 하겠습니다

.
var flow = function(funcs) {
    var length = funcs.length
    var index = length
    while (index--) {
        if (typeof funcs[index] !== &#39;function&#39;) {
            throw new TypeError(&#39;Expected a function&#39;);
        }
    }
    return function(...args) {
        var index = 0
        var result = length ? funcs[index].apply(this, args) : args[0]
        while (++index < length) {
            result = funcs[index].call(this, result)
        }
        return result
    }
}
var flowRight = function(funcs) {
    return flow(funcs.reverse())
}
lodash보실 수 있습니다.

의 원래 구현은

의 구현이지만 추가 기능 검증 계층과 함께 lodash

도 제공하며 수신되는 내용은 다음과 같습니다.

이 아니라 lodash이고, 이 从左到右 줄에서 배열이 비어 있어도 된다는 것을 알 수 있으며, 매우 엄격하다는 것을 알 수 있습니다. 내가 작성한 내용에는 이러한 엄격한 예외 처리가 부족했습니다. 从右到左flowRight결론数组参数序列이번에는 함수형 프로그래밍에서 var result = length ? funcs[index].apply(this, args) : args[0] 함수의 원리와 구현 방법을 주로 소개했습니다. 지면 관계로 제가 계획하고 있는

소스 코드 구현을 넣었습니다. 아래에서 분석해 보겠습니다.

에서 구현한

가 더 기능적이어서 별도로 분석해야 한다고 할 수 있습니다.

위 내용은 JavaScript 함수형 프로그래밍에서 compose로 구현한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.