Exemple de programmation fonctionnelle JavaScript, compétences d'analyse_javascript

Les exemples de cet article décrivent la programmation fonctionnelle javascript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

JS, comme d'autres langages dynamiques, peut écrire des fonctions d'ordre élevé. Les fonctions dites d'ordre élevé sont des fonctions qui peuvent faire fonctionner des fonctions. Car en js une fonction est un objet complet et appartient à la première classe de citoyens, qui fournit les prérequis à la programmation fonctionnelle.

Ce qui suit est un exemple de code issu d'un tutoriel js. Sa fonction est de calculer la moyenne et l'écart type des éléments du tableau. Tout d'abord, listons une façon d'écrire une programmation non fonctionnelle :

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

Afin d'utiliser la programmation fonctionnelle, nous prédéfinissons quelques fonctions d'assistance :

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

Ci-dessous nous donnons le code js entièrement en utilisant la programmation fonctionnelle :

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))));

À l'exception des fonctions de réduction et de mappage, d'autres fonctions sont données ci-dessus. La fonction de réduction est similaire à la fonction d'injection en Ruby :

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

js s'écrit ainsi :

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

0 est la valeur initiale de sum. Si elle est omise, sum est la valeur du premier élément du tableau. Elle peut être omise ici.

La fonction map est également très simple. Elle revient à opérer sur chaque élément du tableau puis à renvoyer un tableau après l'opération. Prenons l'exemple du code Ruby. Le code js est similaire à ceci :

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

Analysons cette longue chaîne de code :)

somme et produit définissent des fonctions pour ajouter et multiplier des éléments

neg est également une fonction équivalente à : product(-1,x), ce qui signifie une valeur x négative

La fonction carré est équivalente à : Math.pow(x,2), qui calcule la valeur carrée de x Notez que le deuxième paramètre de partial ici est indéfini, ce qui signifie que le paramètre formel ici sera remplacé par le. premier paramètre réel. Remplissez ; soyons clairs : la fonction square(x) est égale à Math.pow(x,2).

La fonction sqrt est similaire à square, et sa fonction est équivalente à : Math.pow(x,0.5), ce qui équivaut à calculer la racine carrée de x.

La dernière fonction réciproque n'est pas difficile. Elle équivaut à : Math.pow(x,-1), c'est-à-dire calculer la puissance négative de x, ce qui équivaut à calculer l'inverse de x.

Voici comment pétrir les fonctions ci-dessus ensemble :)

Regardons d'abord le calcul de la moyenne. C'est très simple : calculez d'abord la somme des éléments du tableau, puis multipliez-la par l'inverse de la longueur du tableau, c'est-à-dire la somme du tableau/la longueur du tableau.

Enfin, en regardant l’écart type apparemment difficile, nous ferions mieux de regarder de l’intérieur :

Regardez d'abord le calque contenant le négatif :

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

Regardez la fonction de composition ci-dessous :

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

Regardons la fonction de carte :

//C'est très clair ! ? Autrement dit, chaque élément des données est une moyenne, puis élève le résultat à la puissance 2.

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

Regardez ensuite la fonction de réduction en dehors de la carte :

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

Jetez ensuite un œil à la fonction réciproque :

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

Regardez la fonction extérieure du produit :

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

Le sqrt le plus à l'extérieur signifie trouver la racine carrée du résultat de la division ci-dessus ; vous pouvez le comparer avec le code de programmation non fonctionnel précédent, c'est pareil :) Cela semble être un gros gâchis de code qui est assez intimidant, mais c'est difficile après analyse. Il atteindra immédiatement zéro. Si vous, le lecteur, dites que vous ne comprenez toujours pas, c’est entièrement une question de capacité d’expression linguistique de mon chat, et vous êtes invités à poser des questions.

L’explication est terminée, le combat est terminé et c’est fini.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.