변환기: 강력한 기능 구성 패턴
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 < xs.length; i++) { ret.push(f(xs[i])) } return ret }
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 < xs.length; i++) { if (f(xs[i])) { ret.push(xs[i]) } } return ret }
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 <= 0) { break } n-- ret['@@transducer/step'](x) } return ret } var rtake = curry(take)
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 < xs.length; i++) { ret.push(f(xs[i])) } return ret }
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 < xs.length; i++) { if (f(xs[i])) { ret.push(xs[i]) } } return ret }
Transformer는 단일 매개변수 함수로 함수 구성에 편리합니다.
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 <= 0) { break } n-- ret['@@transducer/step'](x) } return ret } var rtake = curry(take)
변환 및 변환
그런데 변환기는 어떻게 사용하나요?
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 < xs.length; i++) { ret.push(f(xs[i])) } return ret }
함수 실행은 오른쪽 결합입니다.
변환기 버전
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 < xs.length; i++) { if (f(xs[i])) { ret.push(xs[i]) } } return ret }
참조
트랜스듀서 등장
변환기 - Clojure 참조
위 내용은 변환기: 강력한 기능 구성 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
