> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 함수형 프로그래밍의 코드 구성(compose) 이해

JavaScript 함수형 프로그래밍의 코드 구성(compose) 이해

不言
풀어 주다: 2019-03-20 10:02:21
앞으로
3408명이 탐색했습니다.

이 글의 내용은 JavaScript 함수형 프로그래밍의 코드 구성(compose)에 대한 내용입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

함수형 프로그래밍에서 코드 합성(compose)을 이해하는 방법은 무엇인가요?

정의: 이름에서 알 수 있듯이 함수형 프로그래밍에서 Compose는 여러 가지 고유한 함수를 하나로 모아 결합하여 완전히 새로운 함수를 생성하는 것입니다

코드 이해:

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

// 一个在字符后加!的函数
let exclaim = (x) => x + '!';

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了
로그인 후 복사

pointfree

코드 구성에는 중요한 개념이 있습니다: pointfree(데이터를 알려주지 않음), 이는 함수가 어떤 데이터에서 작동할지 언급할 필요가 없다는 것을 의미합니다

좀 모호합니다. code

// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义,此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面这个函数与上面的功能一致,但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)
로그인 후 복사

무엇을 할 수 있나요? 불필요한 이름 지정을 줄이고 코드를 단순하고 보편적으로 유지하는 데 도움이 됩니다

compose 구현

위에서 모두 compose 메소드가 이미 존재한다고 가정했습니다. 다음으로 구현해 보겠습니다.

먼저 그 특성을 분석해 보세요

    두 함수 모두 공통 매개변수를 가지고 있습니다
  • 함수의 실행 순서는 오른쪽에서 왼쪽입니다
  • 이전 함수의 실행 결과는 나중 함수로 처리됩니다
끝난 걸까요? 위의 예와 우리가 분석한 특성을 기반으로

// 这样子其实就能满足我们上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};
로그인 후 복사
의 가장 간단한 버전을 구현하려면? 아니오, 위의 Compose 예는 두 개의 함수만 전달한다는 것을 알 수 있습니다. 단순화된 버전의 Compose 구현은 두 개의 함수만 지원하므로, 매우 긴 파이프라인을 지원하고 싶지만 위의 Compose만으로는 충분하지 않습니다. 그러면 우수한 오픈 소스 라이브러리 redux

// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js
export default function compose(...funcs) {
  // 没有传入函数运行直接返回参数
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只传入一个函数,就返回其本身
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  // 核心代码其实就是一句reduce, reduce特性就是按顺序执行,并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
로그인 후 복사

의 Compose 구현을 살펴보겠습니다. 요약

여러 단일 특성 함수를 결합하는 함수

여러 함수가 일련의 데이터를 제공합니다(공통 매개변수)

데이터를 말할 필요가 없습니다(포인트프리)

함수는 오른쪽에서 왼쪽으로 순차적으로 실행되며 결과는 다음 함수의 매개변수에 대해

이 문서에는 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

JavaScript 튜토리얼 비디오 칼럼을 주목하세요!

위 내용은 JavaScript 함수형 프로그래밍의 코드 구성(compose) 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿