Javascript高階関数の使い方入門_JavaScriptスキル-jsチュートリアル-php.cn

Javascript高階関数の使い方入門_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:55:00

オリジナル

1313 人が閲覧しました

高階関数 - 関数がパラメータを受け取るか関数を返す場合、この関数を高階関数と呼ぶことができます。ご存知のとおり、JavaScript は型指定が弱い言語です。JavaScript 関数は関数の入力パラメーターや出力値を厳密に定義したり型チェックしたりすることはありません。その場合、関数は JavaScript ネイティブを体現するパラメーターまたは出力値になる可能性があります。高階関数のサポート。

1. パラメーターが関数である高階関数:

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

ログイン後にコピー

これはパラメータを関数として受け取る単純な高階関数です。 funcTest を呼び出すときは、関数をパラメータとして入力し、入力された匿名関数を funcTest 内で実行します。もちろん、このようなコードスニペットには実際的な意味はありません。

1. 戻り値が関数である高階関数:

function funcTest(){
return function(){};
}
var f=funcTest();

ログイン後にコピー

funcTest を呼び出すと関数が返されます。

2. より複雑な例:

//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

ログイン後にコピー

上記の例では、String型加算とNumber型加算の分離を実装しています。 add 関数が呼び出されるとき、入力パラメーターが "string" の場合は文字列スプライシング関数が出力され、入力パラメーターが "int" の場合はデジタル加算関数が出力されます。

3. 高階関数の実際の役割:

上記のコード例は、基本的に高階関数とは何かを説明しています。高階関数が実際のプログラミングにどのように関連しているかを見てみましょう。

1、コールバック関数

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

ログイン後にコピー

例では、funcTest が呼び出されるときに、funcTest の内部でコールバック関数が呼び出されます。つまり、コールバックが実装されます。

2、データのスクリーニングと並べ替えのアルゴリズム

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

ログイン後にコピー

3、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>

ログイン後にコピー

上記の例では、ID が myBtn のボタンがドキュメント内で定義されており、js スクリプトによってクリックイベントが追加されます。ここで、addEventListener の 2 番目のパラメーターは関数です。

結論: 高階関数は JavaScript の特許ではありませんが、JavaScript プログラミングの強力なツールであることは間違いありません。高階関数は実際には基本アルゴリズムを再抽象化したもので、これを使用してコードの抽象化を改善し、コードを最大限に再利用し、よりシンプルでリファクタリングに適したコードを作成できます。