Home > Article > Web Front-end > Introduction to the use of Javascript high-order functions_javascript skills

Introduction to the use of Javascript high-order functions_javascript skills

WBOYOriginal: 2016-05-16 15:55:001314browse

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(){ });

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();

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

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

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

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of JQuery tool functions_jqueryNext article：Summary of JQuery tool functions_jquery

See more

Introduction to the use of Javascript high-order functions_javascript skills

Related articles