ホームページ > 記事 > ウェブフロントエンド > Javascript高階関数の使い方入門_JavaScriptスキル
Javascript高階関数の使い方入門_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:55:001317ブラウズ
高階関数 - 関数がパラメータを受け取るか関数を返す場合、この関数を高階関数と呼ぶことができます。ご存知のとおり、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 プログラミングの強力なツールであることは間違いありません。高階関数は実際には基本アルゴリズムを再抽象化したもので、これを使用してコードの抽象化を改善し、コードを最大限に再利用し、よりシンプルでリファクタリングに適したコードを作成できます。