JavaScript의 함수 조합 및 커링에 대한 자세한 설명(예제 포함)

이 글은 JavaScript 함수 조합과 커링에 대한 자세한 설명을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우리 모두는 단일 책임 원칙, 사실 객체지향 SOLID의 S(SRP, 단일 책임 원칙)를 알고 있습니다. 함수형 프로그래밍에서 각 함수는 하나의 단위이며 한 가지 작업만 수행해야 합니다. 그러나 현실 세계는 항상 복잡하며, 현실 세계를 프로그래밍에 매핑할 때 단일 기능은 그다지 의미가 없습니다. 이때 함수 ​​구성과 커링이 필요합니다.

체인콜

jQuery를 사용해보신 분들이라면 $('.post').eq(1) 처럼 체인콜이 무엇인지 아실 겁니다. attr('data-test', 'test'). JavaScript의 일부 기본 문자열 및 배열 메서드를 사용하여 체인 호출을 작성할 수도 있습니다. $('.post').eq(1).attr('data-test', 'test').javascript原生的一些字符串和数组的方法也能写出链式调用的风格：

'Hello, world!'.split('').reverse().join('') // "!dlrow ,olleH"

首先链式调用是基于对象的，上面的一个一个方法split, reverse, join如果脱离的前面的对象"Hello, world!"是玩不起来的。

而在函数式编程中方法是独立于数据的，我们可以把上面以函数式的方式在写一遍：

const split = (tag, xs) => xs.split(tag)
const reverse = xs => xs.reverse()
const join = (tag, xs) => xs.join(tag)

join('',reverse(split('','Hello, world!'))) // "!dlrow ,olleH"

你肯定会说，你是在逗我。这比链式调用好在哪儿了？这里还是依赖于数据的啊，没有传递`'Hello, world!'，你这一串一串的函数组合也转不起来啊。这里唯一的好处也就是那几个单独的方法可以复用了。莫慌，后面还有那么多内容我怎么也会给你优化（忽悠）好的。再进行改造前，我们先介绍两个概念，部分应用和柯里化。

部分应用

部分应用是一种处理函数参数的流程，他会接收部分参数，然后返回一个函数接收更少的参数。这个就是部分应用。我们用bind来实现一把:

const addThreeArg = (x, y, z) => x + y + z;

const addTwoArg = addThreeNumber.bind(null, 1)
const addOneArg = addThreeNumber.bind(null, 1, 2)

addTwoArg(2, 3) // 6
addOneArg(7) // 10

上面利用bind生成了另外两个函数，分别接受剩下的参数，这就是部分应用。当然你也可以通过其他方式实现。

部分应用存在的问题

部分应用主要的问题在于，它返回的函数类型无法直接推断。正如前面所说，部分应用返回一个函数接收更少的参数，而没有规定返回的参数具体是多少个。这也就是一些隐式的东西，你需要去查看代码。才知道返回的函数接收多少个参数。

柯里化

柯里化定义：你可以调一个函数，但是不一次将所有参数传给它。这个函数会返回一个函数去接收下一个参数。

const add = x => y => x + y
const plusOne = add(1)
plusOne(10) // 11

柯里化的函数返回一个只接收一个参数的函数，返回的函数类型可以预测。

当然在实际开发中，有很多的函数都不是柯里化的，我们可以使用一些工具函数来转化：

const curry = (fn) => { // fn可以是任何参数的函数
  const arity = fn.length;

  return function $curry(...args) {
    if (args.length <p>也可以用开源库Ramda里提供的curry方法。</p><h3>哦，柯里化。有什么用呢？</h3><p>举个例子</p><pre class="brush:php;toolbar:false">const currySplit = curry((tag, xs) => xs.split(tag))
const split = (tag, xs) => xs.split(tag)

// 我现在需要一个函数去split ","

const splitComma = currySplit(',') //by curry

const splitComma = string => split(',', string)

可以看到柯里化的函数生成新函数时，和数据完全没有关系。对比两个生成新函数的过程，没有柯里化的相对而言就有一点啰嗦了。

函数组合

先给代码：

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

其实compose做的事情一共两件：

1. 接收一组函数，返回一个函数，不立即执行函数

2. 组合函数，将传递给他的函数从左到右组合。

可能有同学对上面的reduceRight不是很熟悉，我给个2元和3元的例子：

const compose = (f, g) => (...args) => f(g(...args))
const compose3 = (f, g, z) => (...args) => f(g(z(...args)))

函数调用是从左到右，数据流也是一样的从左到右。当然你可以定义从右到左的，不过从语义上来说就不那么表意了。

好，现在让我们来优化一下最开始的例子：

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const reverseWords = compose(join(''), reverse, split(''))

reverseWords('Hello,world!');

是不是简洁易于理解多了。这里的reverseWords也是我们之前讲过的Pointfree的代码风格。不依赖数据和外部状态，就是组合在一起的一个函数。

Pointfree我在上一篇介绍过JS函数式编程 - 概念，也阐述了其优缺点，有兴趣的小伙伴可以看看。

函数组合的结合律

先回顾一下小学知识加法结合律：a+(b+c)=(a+b)+c

compose(f, compose(g, h)) === compose(compose(f, g), h);

우선, 체인 호출은 개체를 기반으로 하며, 이전 개체 "Hello, world!"가 분리된 경우 위의 split, reverse, join 메서드를 사용할 수 없습니다. 일어나세요.

함수형 프로그래밍에서 메서드는 데이터와 독립적입니다. 위의 내용을 함수형 방식으로 작성할 수 있습니다.

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const getReverseArray = compose(reverse, split(''))

const reverseWords = compose(join(''), getReverseArray)

reverseWords('Hello,world!');

농담이라고 분명히 말할 것입니다. 이것이 연쇄 통화보다 나은 점은 무엇입니까? 이는 여전히 데이터에 의존합니다. 'Hello, world!'를 전달하지 않으면 일련의 함수 조합이 작동하지 않습니다. 여기서 유일한 장점은 개별 방법을 재사용할 수 있다는 것입니다. 당황하지 마세요. 나중에 콘텐츠가 너무 많아서 (어리석게도) 여러분을 위해 최적화해 드리겠습니다. 변환을 진행하기 전에 먼저 부분 적용과 커링이라는 두 가지 개념을 소개합니다.

부분 적용

부분 적용은 함수 매개변수를 처리한 다음 더 적은 매개변수를 받은 함수를 반환하는 프로세스입니다. 이것은 응용 프로그램의 일부입니다. 이를 구현하기 위해 bind를 사용합니다: rrreee위에서는 bind를 사용하여 나머지 매개변수를 각각 허용하는 두 개의 다른 함수를 생성합니다. 애플리케이션. 물론 다른 방법으로도 할 수 있습니다.

일부 애플리케이션의 문제

일부 애플리케이션의 주요 문제는 반환하는 함수 유형을 직접 유추할 수 없다는 것입니다. 앞에서 언급했듯이 일부 응용 프로그램은 반환되는 매개 변수 수를 지정하지 않고 더 적은 수의 매개 변수를 허용하는 함수를 반환합니다. 이는 암시적인 내용이므로 코드를 살펴봐야 합니다. 그래야만 반환된 함수가 받는 매개변수 수를 알 수 있습니다.

currying#🎜🎜##🎜🎜#Currying 정의: 함수를 호출할 수 있지만 모든 매개변수를 한 번에 전달하지는 않습니다. 이 함수는 다음 매개변수를 받는 함수를 반환합니다. #🎜🎜#rrreee#🎜🎜#커리 함수는 매개변수를 하나만 받는 함수를 반환하며, 반환되는 함수 유형은 예측 가능합니다. #🎜🎜##🎜🎜# 물론 실제 개발에서는 많은 기능이 카레되지 않습니다. 일부 도구 기능을 사용하여 변환할 수 있습니다. #🎜🎜#rrreee#🎜🎜# 오픈 소스 라이브러리 Ramda Curry 방법을 사용할 수도 있습니다. 제공됩니다. #🎜🎜#

아, 카레. 무슨 소용이 있나요?

#🎜🎜#예를 들어#🎜🎜#rrreee#🎜🎜#커리 함수가 새로운 함수를 생성할 때 데이터와는 아무런 관련이 없음을 알 수 있습니다. 새로운 함수를 생성하는 두 가지 프로세스를 비교하면 카레가 없는 프로세스는 상대적으로 장황합니다. #🎜🎜##🎜🎜#함수 조합#🎜🎜##🎜🎜#먼저 코드를 제공합니다. #🎜🎜#rrreee#🎜🎜#사실 Compose는 총 두 가지 작업을 수행합니다. #🎜🎜#

1. #🎜🎜#함수 세트를 수신하고, 함수를 반환하고, 함수를 즉시 실행하지 않습니다. #🎜🎜#
2. #🎜🎜#함수 결합, 그리고 그에게 전달된 함수를 왼쪽에서 오른쪽으로 전달합니다. #🎜🎜#

#🎜🎜# 어쩌면 일부 학생들은 축소에 대해 잘 알지 못할 수도 있습니다. 위의 2위안과 3위안의 예를 들어보겠습니다: #🎜🎜#rrreee#🎜🎜# 함수 호출은 왼쪽에서 오른쪽으로 이루어지며, 데이터 흐름도 왼쪽에서 오른쪽으로 진행됩니다. 물론 오른쪽에서 왼쪽으로 정의할 수 있지만 의미상 그다지 의미가 없습니다. #🎜🎜##🎜🎜#좋아, 이제 초기 예제를 최적화해보자: #🎜🎜#rrreee#🎜🎜# 훨씬 간단하고 이해하기 쉽나요? 여기의 reverseWords는 이전에 이야기한 Pointfree 코드 스타일이기도 합니다. 데이터나 외부 상태에 의존하지 않고 함께 결합된 기능입니다. #🎜🎜##🎜🎜#Pointfree 이전 글에서 JS 함수형 프로그래밍의 개념을 소개했고, 장점과 단점도 설명했습니다. #🎜🎜#

함수 조합의 결합 법칙

#🎜🎜# 먼저 초등학교 지식 덧셈의 결합 법칙을 살펴보겠습니다. a+(b+c)=(a+b)+c . 설명하지 않겠습니다. 여러분은 이해할 수 있을 것입니다. #🎜🎜##🎜🎜#돌이켜보면 함수 조합에는 실제로 결합 법칙이 있습니다. #🎜🎜#rrreee#🎜🎜#이것은 우리 프로그래밍에 있어서 마음대로 결합하고 캐시할 수 있다는 이점입니다. #🎜🎜 # rrreee#🎜🎜#뇌 지도 보충 자료: #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#

위 내용은 JavaScript의 함수 조합 및 커링에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!