JS의 compose 함수와 pipe 함수 사용법을 상세히 설명하다

compose 함수

compose 함수는 플러그인 실행이 필요한 함수를 평평하게 배치할 수 있습니다. 플러그인 실행은 함수의 반환값으로 다른 함수의 매개 변수가 됩니다.우리는 간단한 수요를 고려한다. 이 수요는 매우 간단하다. 직접 계산 함수만 있으면 된다.

const calculate = x => (x + 10) * 10;
let res = calculate(10);
console.log(res);    // 200

그러나 우리가 전에 말한 함수식 프로그래밍에 근거하여 우리는 복잡한 몇 가지 절차를 몇 가지 간단한 복용 가능한 간단한 절차로 분해할 수 있다. 그래서 우리는 덧셈 함수와 곱셈 함수를 분해했다.

const add = x => x + 10;
const multiply = x => x * 10;

//  ，add multiply 
let res = multiply(add(10));
console.log(res);    //  200

위의 계산 방법은 함수의 플러그인 집행이다. 우리compose의 역할은 플러그인 집행 방법을 매개 변수로 평평하게 깔는 것이다. 플러그인 집행을 할 때 그 안의 방법은 바로 오른쪽의 방법이 가장 먼저 집행되고 왼쪽으로 돌아가는 것이다. 우리의compose 방법도 오른쪽의 매개 변수부터 집행하기 때문에 우리의 목표는 매우 명확하다. 우리는 이와 같은compose 방법이 필요하다.

//  ， multiply ，add 
let res = compose(multiply, add)(10);

이것을 말하기 전에 우리가 먼저 필요로 하는 함수 Array를 봅시다.prototype.reduce

Array.prototype.reduce

수조의reduce 방법은 하나의 누적 효과를 실현할 수 있다. 두 개의 매개 변수를 수신하는데 첫 번째는 하나의 누적기 방법이고 두 번째는 초기화 값이다.누적기는 네 개의 매개 변수를 수신한다. 첫 번째는 지난번 계산 값이고, 두 번째는 수조의 현재 값이다. 주로 이 두 개의 매개 변수를 사용한다. 뒤에 있는 두 개의 매개 변수는 자주 사용하지 않는다. 그들은 현재 index와 현재 교체된 수조이다.

const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes []， 
const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [1, 2, 3, 4, 5, 6]

Array.prototype.reduceRight

Array.prototype.reduce는 왼쪽에서 오른쪽으로 교체됩니다. 오른쪽에서 왼쪽으로 교체하려면 Array를 사용하십시오.prototype.reduce Right 했으면 좋겠어요.

const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes []， 
const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [5, 6, 3, 4, 1, 2]

그럼 이 compose 방법은 어떻게 이루어질까요? 여기는 Array를 빌려야 합니다.prototype.reduceRight:

const compose = function(){
  //  ， args == [multiply, add]
  const args = [].slice.apply(arguments);
  return function(x) {
    return args.reduceRight((res, cb) => cb(res), x);
  }
}

//  
let calculate = compose(multiply, add);
let res = calculate(10);
console.log(res);    //  200

위의 compose 함수는 ES6를 사용하면 더욱 간결합니다.

const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);

Redux의 중간부품은compose로 이루어집니다. 웹팩에서loader의 불러오는 순서도 오른쪽에서 왼쪽으로 됩니다. 이것은 그도compose로 이루어졌기 때문입니다.

pipe 함수

pipe 함수는compose 함수의 좌우와 같고 매개 변수를 평평하게 깔지만 그의 순서는 왼쪽에서 오른쪽이다.우리가 실현하려면 ReduceRight를 Reduce로 바꾸면 된다.

const pipe = function(){
  const args = [].slice.apply(arguments);
  return function(x) {
    return args.reduce((res, cb) => cb(res), x);
  }
}

//  
let calculate = pipe(add, multiply);
let res = calculate(10);
console.log(res);    //  200

ES6 쓰기 방법:

const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)

이상은 JS의 compose 함수와 pipe 함수 용법에 대한 상세한 내용입니다. JS에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!