JS에서 절묘한 자동 커링 기능을 구현하는 방법-JS 튜토리얼-php.cn

이 기사는 JS의 절묘한 자동 커링 방법을 자세히 분석하고 코드 예제를 통해 프로세스와 원리를 분석하므로 도움이 되길 바랍니다.

커링이란 무엇인가요?

컴퓨터 과학에서 커링은 여러 매개변수를 받는 함수를 단일 매개변수(원래 함수의 첫 번째 매개변수)를 받는 함수로 변환하고, 나머지 매개변수를 받아 결과를 반환하는 함수를 반환하는 것입니다. 기능 기술. 이 기술은 Moses Schnfinkel과 Gottlob Frege가 발명했지만 논리학자 Haskell Curry의 이름을 따서 Christopher Strachey가 명명했습니다.

이론이 압도적인 것 같나요? 중요하지 않습니다. 먼저 코드를 살펴보겠습니다.

Curriization application

목록의 각 요소에 하나를 추가하는 등 목록 요소에 대한 일부 처리를 수행하는 함수를 구현해야 한다고 가정해 보겠습니다. 생각하기 쉽습니다:

const list = [0, 1, 2, 3];
list.map(elem => elem + 1);

로그인 후 복사

쉽죠? 2개를 더 추가하고 싶다면 어떻게 해야 할까요?

const list = [0, 1, 2, 3];
list.map(elem => elem + 1);
list.map(elem => elem + 2);

로그인 후 복사

좀 비효율적인 것 같은데요. 처리 기능을 캡슐화할 수 있나요?

하지만 map의 콜백 함수는 현재 요소 elem만 매개변수로 받아들입니다. 이를 캡슐화할 방법은 없는 것 같습니다...

부분적으로 구성된 함수를 얻을 수 있으면 좋겠다고 생각할 수도 있습니다. , 예:

// plus返回部分配置好的函数
const plus1 = plus(1);
const plus2 = plus(2);
plus1(5); // => 6
plus2(7); // => 9

로그인 후 복사

다음과 같은 함수를 map에 전달합니다.

const list = [0, 1, 2, 3];
list.map(plus1); // => [1, 2, 3, 4]
list.map(plus2); // => [2, 3, 4, 5]

로그인 후 복사

멋지지 않나요? 이렇게 하면 아무리 추가해도 list.map(plus(x))만 있으면 캡슐화를 완벽하게 구현하고 가독성이 크게 향상됩니다!

하지만 질문이 생깁니다. 이러한 플러스 기능을 어떻게 구현하나요?

여기서 커링이 유용합니다:

커링 함수

// 原始的加法函数
function origPlus(a, b) {
 return a + b;
}
// 柯里化后的plus函数
function plus(a) {
 return function(b) {
  return a + b;
 }
}
// ES6写法
const plus = a => b => a + b;

로그인 후 복사

보시다시피 커링 플러스 함수는 먼저 매개변수 a를 받은 다음 매개변수 b 함수를 반환합니다. function은 상위 함수의 매개변수 a에 액세스할 수 있습니다. 예를 들어, const plus2 = plus(2)는 function plus2(b) { return 2 + b }와 동일할 수 있으므로 부분 구성이 가능합니다.

일반인의 관점에서 커링은 다중 매개변수 함수를 부분적으로 구성하는 프로세스이며, 각 단계는 단일 매개변수를 허용하는 부분적으로 구성된 함수를 반환합니다. 극단적인 경우에는 여러 번 추가하는 등 기능을 여러 번 부분적으로 구성해야 할 수도 있습니다.

multiPlus(1)(2)(3); // => 6

로그인 후 복사

이런 작성 방식이 이상해 보이죠? 하지만 JS 함수형 프로그래밍의 큰 함정에 빠지면 이것이 표준이 될 것입니다.

JS에서 자동 커링을 절묘하게 구현

커링은 함수형 프로그래밍에서 매우 중요한 부분입니다(예: 하스켈). 기본적으로 함수가 자동으로 커링됩니다. 하지만 JS에서는 이를 수행하지 않으므로 자동 커링 기능을 직접 구현해야 합니다.

먼저 코드를 입력하세요:

// ES5
function curry(fn) {
 function _c(restNum, argsList) {
  return restNum === 0 ?
   fn.apply(null, argsList) :
   function(x) {
    return _c(restNum - 1, argsList.concat(x));
   };
 }
 return _c(fn.length, []);
}
// ES6
const curry = fn => {
 const _c = (restNum, argsList) => restNum === 0 ?
  fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);
 return _c(fn.length, []);
}
/***************** 使用 *********************/
var plus = curry(function(a, b) {
 return a + b;
});
// ES6
const plus = curry((a, b) => a + b);
plus(2)(4); // => 6

로그인 후 복사

이렇게 하면 자동 커링이 이루어집니다!

무슨 일이 일어났는지 이해할 수 있다면 축하합니다! 모두가 당신을 부르는 상사는 당신입니다! , 좋아요를 남기고 기능적 경력을 시작하세요. (재미있습니다

무슨 일이 일어나고 있는지 이해하지 못하더라도 걱정하지 마세요. 지금 아이디어를 정리하는 데 도움을 드릴 것입니다.

요구 사항 분석

카레가 필요해요 커리할 함수를 매개변수로 받아들이고 매개변수를 받은 함수를 반환하는 함수입니다. 받은 매개변수가 목록에 배치되면 원래 함수가 실행되고 결과가 반환됩니다.

구현 방법

간단히 생각하면 부분 구성 함수를 커링하는 단계 수는 fn의 매개 변수 수와 동일합니다. 이는 매개 변수가 두 개인 플러스 기능을 두 단계로 부분적으로 구성해야 함을 의미합니다.

일반적인 개념은 매개변수가 전달될 때마다 매개변수가 매개변수 목록 argsList에 저장된다는 것입니다. 전달될 매개변수가 없으면 fn.apply(null, argsList)가 됩니다. 함수 실행을 위해 내부 판단 함수 _c(restNum, argsList)가 필요합니다. 이 함수는 두 개의 매개변수를 허용합니다. 하나는 나머지 매개변수의 수이고 다른 하나는 획득된 목록입니다. 매개변수 argsList; _c 전달되지 않은 매개변수가 있는지 확인하는 함수입니다. RestNum이 0이면 fn.apply(null, argsList)를 통해 원래 함수를 실행하고 있으면 결과를 반환합니다. 여전히 전달해야 하는 매개변수, 즉 RestNum입니다. 0이 아닌 경우 매개변수를 계속 수신하려면 단일 매개변수 함수

function(x) {
 return _c(restNum - 1, argsList.concat(x));
}

로그인 후 복사

를 반환해야 합니다. 함수가 매개변수를 받아들이면 나머지 필수 매개변수 개수인 RestNum이 1씩 줄어들고 새 매개변수가 argsList에 추가된 후 재귀 호출을 위해 _c가 전달됩니다. 충분하지 않으면 새 매개변수 수신을 담당하는 단일 매개변수 함수가 반환됩니다. 매개변수가 충분하면 원래 함수가 호출되어 반환됩니다.

이제 살펴보겠습니다.

function curry(fn) {
 function _c(restNum, argsList) {
  return restNum === 0 ?
   fn.apply(null, argsList) :
   function(x) {
    return _c(restNum - 1, argsList.concat(x));
   };
 }
 return _c(fn.length, []); // 递归开始
}

로그인 후 복사

이제 명확해지기 시작하나요? ?

ES6 작성 방법은 배열 분해, 화살표 함수 등의 구문 설탕을 사용하여 훨씬 간단해 보이지만 아이디어는 동일합니다~

// ES6
const curry = fn => {
 const _c = (restNum, argsList) => restNum === 0 ?
  fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);

 return _c(fn.length, []);
}

로그인 후 복사

다른 방법과의 비교

또 다른 공통점이 있습니다 사용된 방법:

function curry(fn) {
 const len = fn.length;
 return function judge(...args1) {
  return args1.length >= len ?
  fn(...args1):
  function(...args2) {
   return judge(...[...args1, ...args2]);
  }
 }
}
// 使用箭头函数
const curry = fn => {
 const len = fn.length;
 const judge = (...args1) => args1.length >= len ?
  fn(...args1) : (...args2) => judge(...[...args1, ...args2]);
 return judge;
}

로그인 후 복사

이 기사에서 이전에 언급한 방법과 비교하면 이 방법에는 두 가지 문제가 있는 것으로 나타났습니다.

ES6 Destructuring에 따라 다릅니다(함수 매개 변수의...args1 및...args2).

性能稍差一点。

性能问题

做个测试：

console.time("curry");
const plus = curry((a, b, c, d, e) => a + b + c + d + e);
plus(1)(2)(3)(4)(5);
console.timeEnd("curry");

로그인 후 복사

在我的电脑（Manjaro Linux，Intel Xeon E5 2665，32GB DDR3 四通道1333Mhz，Node.js 9.2.0）上：

本篇提到的方法耗时约 0.325ms

其他方法的耗时约 0.345ms

差的这一点猜测是闭包的原因。由于闭包的访问比较耗性能，而这种方式形成了两个闭包：fn 和 len，前面提到的方法只形成了 fn 一个闭包，所以造成了这一微小的差距。