Rumah > Artikel > hujung hadapan web > Pengenalan kepada penggunaan kemahiran Javascript high-order functions_javascript

Pengenalan kepada penggunaan kemahiran Javascript high-order functions_javascript

WBOYasal: 2016-05-16 15:55:001314semak imbas

Fungsi tertib lebih tinggi - Jika fungsi menerima parameter atau mengembalikan fungsi, maka kita boleh memanggil fungsi ini sebagai fungsi tertib lebih tinggi. Seperti yang kita semua tahu, JavaScript ialah bahasa yang ditaip lemah: Fungsi JavaScript tidak menentukan atau menaip parameter input atau nilai output fungsi dengan kuat Kemudian fungsi itu boleh menjadi parameter atau nilai output, yang merangkumi JavaScript Native sokongan untuk fungsi peringkat tinggi.

1. Fungsi tertib tinggi yang parameternya ialah fungsi:

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

Ini ialah fungsi tertib tinggi mudah yang mengambil parameter sebagai fungsi. Apabila memanggil funcTest, masukkan fungsi sebagai parameter, dan laksanakan input fungsi tanpa nama di dalam funcTest Sudah tentu, coretan kod sedemikian tidak mempunyai makna praktikal.

1. Fungsi tertib tinggi yang nilai pulangannya ialah fungsi:

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

Panggilan funcTest mengembalikan fungsi.

2. Contoh yang lebih rumit:

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

Contoh di atas melaksanakan pemisahan penambahan jenis Rentetan dan penambahan jenis Nombor. Apabila fungsi tambah dipanggil, jika parameter input ialah "rentetan", fungsi penyambungan rentetan adalah output jika parameter input ialah "int", fungsi penambahan digital ialah output.

3. Peranan sebenar fungsi peringkat tinggi:

Contoh kod di atas pada asasnya menerangkan fungsi tertib lebih tinggi Mari kita lihat bagaimana fungsi tertib lebih tinggi berkaitan dengan pengaturcaraan sebenar kami:

1, fungsi panggil balik

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

Contohnya ialah apabila funcTest dipanggil, fungsi panggil balik akan dipanggil secara dalaman dalam funcTest, iaitu panggilan balik dilaksanakan.

2, Penyaringan data dan algoritma pengisihan

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, takrifan acara elemen 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>

Dalam contoh di atas, butang dengan id myBtn ditakrifkan dalam dokumen dan skrip js menambahkan acara klik padanya, dengan parameter kedua addEventListener ialah fungsi.

Kesimpulan: Fungsi tertib tinggi bukanlah paten JavaScript, tetapi ia sememangnya alat yang berkuasa untuk pengaturcaraan JavaScript. Fungsi tertib lebih tinggi sebenarnya adalah abstraksi semula algoritma asas Kita boleh menggunakannya untuk meningkatkan pengabstrakan kod, mencapai penggunaan semula kod maksimum dan menulis kod yang lebih mudah dan lebih kondusif untuk pemfaktoran semula.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan alat JQuery functions_jqueryArtikel seterusnya：Ringkasan alat JQuery functions_jquery

Artikel berkaitan

Lihat lagi