Introduction to the use of Javascript high-order functions

Introduction to the use of Javascript high-order functions_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-05-16 15:55:00

Original

1389 people have browsed it

Higher-order function - If a function receives parameters or returns a function, then we can call this function a higher-order function. As we all know, JavaScript is a weakly typed language: JavaScript functions do not strongly define or type-check input parameters or output values of the function. Then the function can become a parameter or an output value, which embodies the JavaScript Native support for higher-order functions.

1. Higher-order functions whose parameters are functions:

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

Copy after login

This is a simple higher-order function that takes parameters as functions. When calling funcTest, input a function as a parameter, and execute the input anonymous function inside funcTest. Of course, such a code snippet has no practical meaning.

1. Higher-order functions whose return values are functions:

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

Copy after login

Calling funcTest returns a function.

2. A more complicated example:

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

Copy after login

The above example implements the separation of String type addition and Number type addition. When the add function is called, if the input parameter is "string", a string splicing function is output; if the input parameter is "int", a digital addition function is output.

3. The actual role of higher-order functions:

The above code example basically explains what higher-order functions are. Let’s take a look at how higher-order functions relate to our actual programming:

1, callback function

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

Copy after login

The example is when funcTest is called, the callback function will be called internally in funcTest, that is, the callback is implemented.

2, Data screening and sorting algorithm

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

Copy after login

3, DOM element event definition

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

Copy after login

In the above example, a button with the id myBtn is defined in the document, and the js script adds a click event to it, where the second parameter of addEventListener is a function.

Conclusion: High-order functions are not a patent of JavaScript, but they are definitely a powerful tool for JavaScript programming. Higher-order functions are actually a re-abstraction of basic algorithms. We can use this to improve the abstraction of the code, achieve maximum code reuse, and write code that is simpler and more conducive to refactoring.