Heim > Web-Frontend > js-Tutorial > Beispiel für funktionale JavaScript-Programmierung, Analyse_Javascript-Kenntnisse

Beispiel für funktionale JavaScript-Programmierung, Analyse_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 16:02:17
Original
1302 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die funktionale Programmierung mit Javascript. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

JS kann wie andere dynamische Sprachen Funktionen höherer Ordnung schreiben. Die sogenannten Funktionen höherer Ordnung sind Funktionen, die Funktionen ausführen können. Denn in js ist eine Funktion ein vollständiges Objekt und gehört zur ersten Klasse von Bürgern, die die Voraussetzungen für funktionale Programmierung bietet.

Das Folgende ist ein Beispielcode aus einem JS-Tutorial. Seine Funktion besteht darin, den Durchschnitt und die Standardabweichung von Array-Elementen zu berechnen. Lassen Sie uns zunächst eine Möglichkeit zum Schreiben nichtfunktionaler Programmierung auflisten:

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
Nach dem Login kopieren

Um die funktionale Programmierung zu nutzen, definieren wir einige Hilfsfunktionen vor:

//将类数组对象转换为真正的数组
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));
 };
}
Nach dem Login kopieren

Nachfolgend geben wir den JS-Code vollständig unter Verwendung funktionaler Programmierung an:

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))));
Nach dem Login kopieren

Mit Ausnahme der Reduzierungs- und Kartenfunktionen sind oben weitere Funktionen aufgeführt. Die Reduce-Funktion ähnelt der Inject-Funktion in Ruby:

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

js wird wie folgt geschrieben:

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

0 ist der Anfangswert von sum. Wenn er weggelassen wird, ist sum der Wert des ersten Elements des Arrays.

Die Map-Funktion ist ebenfalls sehr einfach. Sie ähnelt der Bearbeitung jedes Elements des Arrays und der anschließenden Rückgabe eines Arrays. Nehmen Sie als Beispiel den Ruby-Code:

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

Lassen Sie uns diese lange Codefolge analysieren:)

Summe und Produkt definieren Funktionen zum Addieren und Multiplizieren von Elementen;

neg ist auch eine Funktion, die entspricht: Produkt(-1,x), was einen negativen x-Wert bedeutet;

Die Quadratfunktion entspricht: Math.pow(x,2), die den Quadratwert von x berechnet. Beachten Sie, dass der zweite Parameter von „partial“ hier undefiniert ist, was bedeutet, dass der formale Parameter hier durch ersetzt wird Erster tatsächlicher Parameter. Um es klarzustellen: Die Funktion quadrat(x) ist gleich Math.pow(x,2).

Die Funktion sqrt ähnelt quadrat und ihre Funktion entspricht: Math.pow(x,0,5), was der Berechnung der Quadratwurzel von x entspricht.

Der letzte Kehrwert der Funktion ist nicht schwierig. Er entspricht: Math.pow (x, -1), dh der Berechnung der negativen Potenz von x, was der Berechnung des Kehrwerts von x entspricht.


So kneten Sie die oben genannten Funktionen zusammen :)

Schauen wir uns zunächst die Berechnung des Durchschnitts an. Es ist ganz einfach: Berechnen Sie zuerst die Summe der Array-Elemente und multiplizieren Sie sie dann mit dem Kehrwert der Array-Länge, also der Array-Summe/Array-Länge.

Wenn wir uns schließlich die scheinbar schwierige Standardabweichung ansehen, sollten wir besser von innen nach außen schauen:

Schauen Sie sich zunächst die Ebene an, die neg enthält:


//等价于函数sum(-1 * mean + x)
partial(sum,neg(mean)
Nach dem Login kopieren
Sehen Sie sich die Compose-Funktion unten an:

//下面在源代码上做了等价替换,可以再次等价于:
//square(sum(-1*mean + x)),再次展开(我剥,我剥,我剥洋葱...):
//Math.pow(sum(-1*mean + x),2);
compose(square,sum(-1*mean + x))
Nach dem Login kopieren
Sehen wir uns die Kartenfunktion an:

//Es ist sehr klar! ? Das heißt, jedes Element in den Daten ist ein Durchschnitt und das Ergebnis wird dann mit 2 potenziert.

map(data,Math.pow(sum(-1*mean + x),2))
Nach dem Login kopieren
Schauen Sie sich dann die Reduzierungsfunktion außerhalb der Karte an:

//将前面新数组的每个元素值加起来。
reduce(map(...),sum)
Nach dem Login kopieren
Dann werfen Sie einen Blick auf die Kehrfunktion:

//等价于求(data.length-1)的倒数
reciprocal(sum(data.length,-1))
Nach dem Login kopieren
Sehen Sie sich die äußere Produktfunktion an:

//等价于新数组元素的和除以(data.length-1)
product(reduce(...),reciprocal(...))
Nach dem Login kopieren
Das äußerste Quadrat bedeutet, die Quadratwurzel des Ergebnisses der obigen Division zu finden. Sie können es mit dem vorherigen nicht funktionierenden Programmiercode vergleichen. Es ist dasselbe:) Es scheint ein großes Durcheinander an Code zu sein einschüchternd, aber nach der Analyse ist es schwierig. Es wird sofort Null erreichen. Wenn Sie als Leser sagen, dass Sie es am Ende immer noch nicht verstehen, liegt das allein an der sprachlichen Ausdrucksfähigkeit meiner Katze, und Sie können gerne Fragen stellen.

Die Erklärung ist vorbei, der Kampf ist vorbei und Sie sind fertig.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage