JS에서 자동 커링을 구현하는 방법

JS의 절묘한 자동 커링 방법을 자세히 분석하고 코드 예제를 통해 프로세스와 원리를 분석해 보겠습니다.

다음 콘텐츠는 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의 매개 변수 수와 동일합니다. 즉, 두 개의 매개 변수가 있는 plus 함수를 부분적으로 구성해야 함을 의미합니다. fn.length를 통해 얻을 수 있습니다.

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

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

를 반환해야 합니다. 매개변수 수가 부족하면 나머지 매개변수 개수는 1만큼 줄어들고 새 매개변수 x는 재귀 호출을 위해 _c에 전달됩니다. 결과는 매개변수 수가 부족할 때 단일 매개변수 함수가 담당하는 것입니다. 매개변수가 충분하면 원래 함수가 호출되어 반환됩니다.

지금 보세요:

rree.

좀 더 명확해지기 시작했나요? 배열 분해, 화살표 함수 등의 구문 설탕을 사용하지만 아이디어는 동일합니다~

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, []); // 递归开始
}

다른 방법과 비교

한 가지 더 일반적으로 사용되는 방법:

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的解构（函数参数中的 ...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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue中有关SPA首屏加载优化（详细教程）

在Angular中有关管道操作符(|)用法

VS Code编辑器中关于修改选中文字或代码颜色操作

위 내용은 JS에서 자동 커링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!