Maison > interface Web > js tutoriel > Exemple de programmation fonctionnelle JavaScript, compétences d'analyse_javascript

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

WBOY
Libérer: 2016-05-16 16:02:17
original
1294 Les gens l'ont consulté

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
Copier après la connexion

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));
 };
}
Copier après la connexion

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))));
Copier après la connexion

À 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
Copier après la connexion

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);
Copier après la connexion

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]
Copier après la connexion
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)
Copier après la connexion
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))
Copier après la connexion
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))
Copier après la connexion
Regardez ensuite la fonction de réduction en dehors de la carte :

//将前面新数组的每个元素值加起来。
reduce(map(...),sum)
Copier après la connexion
Jetez ensuite un œil à la fonction réciproque :

//等价于求(data.length-1)的倒数
reciprocal(sum(data.length,-1))
Copier après la connexion
Regardez la fonction extérieure du produit :

//等价于新数组元素的和除以(data.length-1)
product(reduce(...),reciprocal(...))
Copier après la connexion
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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal