JavaScript 함수형 프로그래밍 예제 분석_javascript 기술

이 기사의 예에서는 자바스크립트 함수형 프로그래밍을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

JS는 다른 동적 언어와 마찬가지로 고차 함수를 작성할 수 있습니다. 소위 고차 함수는 함수를 실행할 수 있는 함수입니다. 왜냐하면 js에서 함수는 완전한 객체이고 함수형 프로그래밍의 전제 조건을 제공하는 첫 번째 시민 클래스에 속하기 때문입니다.

다음은 js 튜토리얼의 예제 코드입니다. 해당 기능은 배열 요소의 평균 및 표준 편차를 계산하는 것입니다. 먼저 비함수 프로그래밍 작성 방법을 나열해 보겠습니다.

var data = [1,1,3,5,5];
var total = 0;
for(var i = 0;i < data.length;i++)
  total += data[i];
var mean = tatal/data.length; //平均数为3
//计算标准差
total = 0;
for(var i = 0;i < data.length;i++){
  var deviation = data[i] - mean;
  tatal += deviation * deviation;
  }
var stddev = Math,.sqrt(total/(data.length-1));//标准差为2

함수형 프로그래밍을 사용하기 위해 몇 가지 도우미 함수를 미리 정의합니다.

//将类数组对象转换为真正的数组
function array(a,n){
 return Array.prototype.slice.call(a,n||0);
}
//将函数实参传递至左侧
function partial_left(f){
 var args = arguments;
 return function(){
  var a = array(args,1);
  a = a.concat(array(arguments));
  return f.apply(this,a);
 };
}
//将函数的实参传递至右侧
function partial_right(f){
 var args = arguments;
 return function(){
  var a = array(arguments);
  a = a.concat(array(args,1));
  return f.apply(this,a);
 };
}
//该函数实参被用做模版，
//实参列表中的undefined值会被实际实参值填充。
function partial(f){
 var args = arguments;
 return function(){
  var a = array(args,1);
  var i = 0,j = 0;
  for(;i<a.length;i++)
   if(a[i] === undefined)
    a[i] = arguments[j++];
  a = a.concat(array(arguments,j));
  return f.apply(this,a);
 };
}
//返回一个函数类似于f(g())
function compose(f,g){
 return function(){
  return f.call(this,g.apply(this,arguments));
 };
}

아래에서는 함수형 프로그래밍을 사용하여 js 코드를 완전히 제공합니다.

var data = [1,1,3,5,5];
var sum = function(x,y){return x+y;};
var product = function(x,y){return x*y;};
var neg = partial(product,-1);
var square = partial(Math.pow,undefined,2);
var sqrt = partial(Math.pow,undefined,0.5);
var reciprocal = partial(Math.pow,undefined,-1);
//好吧，高潮来鸟 :)
var mean = product(reduce(data,sum),reciprocal(data.length));
var stddev = sqrt(product(reduce(map(data,compose(square,partial(sum,neg(mean)))),sum),reciprocal(sum(data.length,-1))));

리듀스, 맵 기능 외에 다른 기능은 위에 나와 있습니다. 축소 기능은 Ruby의 주입 기능과 유사합니다.

ary = (1..10).to_a
ary.inject(0) {|sum,i|sum + i} //结果为55

js는 다음과 같이 작성됩니다.

var ary = [1,2,3,4,5,6,7,8,9,10]
ary.reduce(function(sum,i){
 return sum + i;
},0);

0은 sum의 초기값입니다. 생략할 경우 sum은 배열의 첫 번째 요소 값입니다. 여기서는 생략할 수 있습니다.

맵 함수도 매우 간단합니다. 배열의 각 요소에 대해 연산을 수행한 다음, 루비 코드를 예로 들면 다음과 같습니다.

a = (1..3).to_a; #数组[1,2,3]
a.map {|x| x*2} #返回新数组[2,4,6]

긴 코드 문자열을 분석해 보겠습니다.)

sum과 product는 요소를 더하고 곱하는 함수를 정의합니다.

neg는 product(-1,x)와 동일한 함수이기도 합니다. 이는 음수 x 값을 의미합니다.

제곱 함수는 x의 제곱 값을 계산하는 Math.pow(x,2)와 동일합니다. 여기서 부분의 두 번째 매개변수는 정의되지 않습니다. 즉, 여기의 형식 매개변수는 다음으로 대체됩니다. 첫 번째 실제 매개변수를 입력하세요. 명확하게 말하자면 square(x) 함수는 Math.pow(x,2)와 같습니다.

sqrt 함수는 square와 유사하며 해당 함수는 x의 제곱근을 계산하는 것과 동일한 Math.pow(x,0.5)와 동일합니다.

마지막 함수 역수는 어렵지 않습니다. Math.pow(x,-1), 즉 x의 역수를 계산하는 것과 동일합니다.

위 기능들을 조합하는 방법은 다음과 같습니다 :)

먼저 평균 계산을 살펴보겠습니다. 매우 간단합니다. 먼저 배열 요소의 합을 계산한 다음 배열 길이의 역수, 즉 배열 합계/배열 길이를 곱합니다.

마지막으로 어려워 보이는 표준편차를 내부에서 살펴보는 것이 좋습니다.

먼저 neg가 포함된 레이어를 살펴보세요.

//等价于函数sum(-1 * mean + x)
partial(sum,neg(mean)

아래 작성 기능을 살펴보세요.

//下面在源代码上做了等价替换，可以再次等价于：
//square(sum(-1*mean + x)),再次展开(我剥,我剥,我剥洋葱...):
//Math.pow(sum(-1*mean + x),2);
compose(square,sum(-1*mean + x))

지도 기능을 살펴보겠습니다.

//아주 명확해요! ? 즉, 데이터의 각 요소는 평균이며 그 결과를 2의 거듭제곱으로 늘립니다.

map(data,Math.pow(sum(-1*mean + x),2))

그런 다음 지도 외부의 축소 기능을 살펴보세요.

//将前面新数组的每个元素值加起来。
reduce(map(...),sum)

그런 다음 상호 함수를 살펴보세요.

//等价于求(data.length-1)的倒数
reciprocal(sum(data.length,-1))

외부 제품 기능 살펴보기:

//等价于新数组元素的和除以(data.length-1)
product(reduce(...),reciprocal(...))

가장 바깥쪽의 sqrt는 위 나눗셈 결과의 제곱근을 구한다는 의미입니다. 이전의 비함수형 프로그래밍 코드와 비교해 보면 동일합니다. :) 상당히 엉망인 코드인 것 같습니다. 위협적이지만 분석하면 어렵습니다. 즉시 0에 도달합니다. 독자 여러분, 결국 아직도 이해가 안 된다고 하신다면 그건 전적으로 우리 고양이의 언어 표현 능력 문제이므로 질문하셔도 좋습니다.

설명도 끝났고, 싸움도 끝났고, 끝입니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.