Maison > interface Web > js tutoriel > Introduction à l'utilisation des fonctions Javascript d'ordre supérieur_compétences Javascript

Introduction à l'utilisation des fonctions Javascript d'ordre supérieur_compétences Javascript

WBOY
Libérer: 2016-05-16 15:55:00
original
1330 Les gens l'ont consulté

Fonction d'ordre supérieur - Si une fonction reçoit des paramètres ou renvoie une fonction, nous pouvons alors appeler cette fonction une fonction d'ordre supérieur. Comme nous le savons tous, JavaScript est un langage faiblement typé : les fonctions JavaScript ne définissent ni ne vérifient de manière forte les paramètres d'entrée ou les valeurs de sortie de la fonction. La fonction peut alors devenir un paramètre ou une valeur de sortie, qui incarne le JavaScript Native. prise en charge de fonctions d’ordre supérieur.

1. Fonctions d'ordre supérieur dont les paramètres sont des fonctions :

function funcTest(f){  
//简易判断一下实参是否为函数
if((typeof f)==”function”){
f();
}}
funcTest(function(){ });
Copier après la connexion

Il s'agit d'une simple fonction d'ordre supérieur qui prend des paramètres comme fonctions. Lorsque vous appelez funcTest, saisissez une fonction en tant que paramètre et exécutez la fonction anonyme d'entrée dans funcTest. Bien sûr, un tel extrait de code n'a aucune signification pratique.

1. Fonctions d'ordre supérieur dont les valeurs de retour sont des fonctions :

function funcTest(){
return function(){};
}
var f=funcTest();
Copier après la connexion

L'appel de funcTest renvoie une fonction.

2. Un exemple plus compliqué :

//Number类型相加  
function addInt(a,b){
return parseInt(a)+parseInt(b);
 }
//String类型相加
function addString(a,b){
return a.toString()+ b.toString(); 
}  
function add(type){
if(type==="string"){
return addString;
}else{
return addInt; 
}
}
var data1=add("string")("1","2");
//12
var data2=add("int")("1","2");
//3
Copier après la connexion

L'exemple ci-dessus implémente la séparation de l'ajout de type String et de l'ajout de type Number. Lorsque la fonction d'ajout est appelée, si le paramètre d'entrée est "string", une fonction d'épissage de chaîne est générée ; si le paramètre d'entrée est "int", une fonction d'addition numérique est générée.

3. Le rôle réel des fonctions d'ordre supérieur :

L'exemple de code ci-dessus explique essentiellement ce que sont les fonctions d'ordre supérieur. Voyons comment les fonctions d'ordre supérieur sont liées à notre programmation réelle :

1, fonction de rappel

function callback(value){
alert(value);
}
function funcTest(value,f)
//f实参检测,检查f是否为函数 
if(typeof callback==='function'){
f(value);}}funcTest(‘1',callback);
//1
Copier après la connexion

L'exemple est que lorsque funcTest est appelé, la fonction de rappel sera appelée en interne dans funcTest, c'est-à-dire que le rappel est implémenté.

2, Algorithme de filtrage et de tri des données

var arr=[0,2,11,9,7,5];
//排序算法
function funcComp(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0;
}
}
//过滤算法
function funcFilter(item,index,array){
return item>=5;
}
//数组顺序排列
arr.sort(funcComp);
alert(arr.join(','));
//0,2,5,7,9,11
//筛选数组
var arrFilter=arr.filter(funcFilter);
alert(arr.join(‘,'))
//5,7,9,11
Copier après la connexion

3, définition d'événement d'élément DOM

<html><title></title>
<body><input type=”button” value=”ClickMe” id=”myBtn” >
<script type=”text/javascript>
var btnClick=document.getElementById(“myBtn”);
//测试环境为FireFox
btnClick. addEventListener(“click”,function(e){
alert(“I'm a button!”);
//I'm a button},false);
</script>
</body>
</html>
Copier après la connexion

Dans l'exemple ci-dessus, un bouton avec l'identifiant myBtn est défini dans le document, et le script js y ajoute un événement click, où le deuxième paramètre de addEventListener est une fonction.

Conclusion : les fonctions d'ordre supérieur ne sont pas un brevet de JavaScript, mais elles constituent certainement un outil puissant pour la programmation JavaScript. Les fonctions d'ordre supérieur sont en fait une ré-abstraction d'algorithmes de base. Nous pouvons l'utiliser pour améliorer l'abstraction du code, obtenir une réutilisation maximale du code et écrire un code plus simple et plus propice à la refactorisation.

É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