Home > Developer > JavaScript
Introduction to using Javascript high-level functions
Higher-order function-if a function receives a parameter or returns a value of the function, we can call this function a high-order function. As we all know, JavaScript is a weak type of language: JavaScript Functions neither define input parameters nor output values of functions, but can become parameters, it can also be an output value, which reflects the native support of JavaScript for higher-order functions.
1. High-order functions with parameters:
?
| 1 2 3 4 5 6 |
Function funcTest (f ){ // Check whether the real parameter is a function. If (typeof f) = "function "){ F (); }} FuncTest (function (){}); |
This is a simple high-level function that uses parameters as functions. When you call funcTest, enter a function as the parameter and execute the anonymous function in funcTest. Of course, such code snippets have no practical significance.
1. return values:
?
| 1 2 3 4 |
Function funcTest (){ Return function (){}; } Var f = funcTest (); |
Call funcTest to return a function.
2. A complex example:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Number type Addition Function addInt (a, B ){ Return parseInt (a) + parseInt (B ); } // String type Addition 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 preceding example separates the addition of the String type from the addition of the Number type. Call the add function. If the input parameter is "string", a string concatenation function is output. If the input parameter is "int", a number addition function is output.
Iii. practical functions of higher-order functions:
The code example above shows what a high-order function is. Let's take a look at the relationship between the high-order function and our actual programming:
1. Callback Function
?
| 1 2 3 4 5 6 7 8 |
Function callback (value ){ Alert (value ); } Function funcTest (value, f) // F real parameter detection, check if f is a function If (typeof callback = 'function '){ F (value) ;}} funcTest ('1', callback ); // 1 |
For example, when you call funcTest, funcTest calls the callback function internally to implement callback.
2. Data Filtering and sorting algorithms
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Var arr = [,]; // Sorting Algorithm Function funcComp (a, B ){ If (a <B ){ Return-1; } Else if (a> B ){ Return 1; } Else { Return 0; } } // Filter Algorithm Function funcFilter (item, index, array ){ Return item> = 5; } // Arrange arrays in sequence Arr. sort (funcComp ); Alert (arr. join (',')); // 0, 2, 5, 7, 9, 11 // Filter the Array Var arrFilter = arr. filter (funcFilter ); Alert (arr. join (',')) // 5, 7, 9, 11 |
3. DOM element event Definition
?
| 1 2 3 4 5 6 7 8 9 10 11 |
<Html> <title> </title> <Body> <input type = "button" value = "ClickMe" id = "myBtn"> <Script type = "text/javascript> Var btnClick = document. getElementById ("myBtn "); // The test environment is 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 of myBtn is defined in the document, and the js script adds a click event for it. 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 the re-Abstraction of basic algorithms. We can use this to improve code abstraction and maximize code reuse, compile code that is more concise and easier to refactor.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
