一.什么是高階函數(shù)
高階函數(shù)是接受函數(shù)作為參數(shù)并且(或者)返回函數(shù)作為輸出的函數(shù)
所以脚猾,高階函數(shù)至少滿足下列條件之一:
- 函數(shù)可以作為參數(shù)被傳遞
- 函數(shù)作為返回值輸出
01. 函數(shù)可以作為參數(shù)被傳遞
1. 基本格式
<script>
function fn(callback){ // 函數(shù)可以作為參數(shù)被傳遞
callback && callback()
}
fn(
function(){console.log('higher-order function')}
)
</script>
2. 舉例 - 回調(diào)函數(shù)
$(".box").click(function () {
$(".item").animate({ height: "200px" });
});
02. 函數(shù)作為返回值輸出
1. 基本格式
<script>
function fn() {// 函數(shù)可以作為返回值輸出
return function () {
console.log('higher-order function')
}
}
fn()()
</script>
2. 舉例 - 判斷是否為數(shù)組(字符串或數(shù)字)
<script>
var isString = function(obj) {
return Object.prototype.toString.call(obj) === '[object String]'
}
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]'
}
var isNumber = function(obj) {
return Object.prototype.toString.call(obj) === '[object Number]'
}
console.log(isString('string')) // true
console.log(isArray([1,2,3]))// true
console.log(isNumber(123))// true
</script>
二. 高階函數(shù)與抽象
1. 什么是抽象
《JavaScript ES6函數(shù)式編程入門(mén)經(jīng)典》中給出描述:一個(gè)編寫(xiě)涉及數(shù)值操作代碼的程序員可能不會(huì)對(duì)底層硬件中的數(shù)字表現(xiàn)方式感興趣僵刮,(不在乎它們是16位還是32位整數(shù))歹嘹,色括這些細(xì)節(jié)在哪里被屏蔽汤求】。可以說(shuō)狮含,它們被抽象出來(lái)了洋满,只留下簡(jiǎn)單的數(shù)字給程序員處理剩晴,這樣的思想就是抽象思想锣咒。
而高階函數(shù)就是定義抽象的過(guò)程
2. 高階函數(shù)就是定義抽象
如下:是一個(gè)myforEach 的函數(shù),函數(shù)接收array和fn兩個(gè)參數(shù)
<script>
const myforEach = (arrary,fn) => {
for(var i = 0; i< arrary.length;i++){
fn(arrary[i])
}
}
</script>
myforEach 所做的工作就是實(shí)現(xiàn)對(duì)數(shù)組遍歷赞弥,對(duì)于調(diào)用者毅整,只需要按照函數(shù)定義的規(guī)則去傳遞參數(shù)就能實(shí)現(xiàn)功能。
所以绽左,抽象關(guān)注思想悼嫉,而不是具體細(xì)節(jié)。
<script>
myforEach([1,2,3],(data)=>{
console.log(data) // 1 2 3
})
</script>
三. 編寫(xiě)一個(gè)高階函數(shù)
JavaScript 內(nèi)置了很多函數(shù)妇菱,比如toFixed()承粤、toString()等內(nèi)置函數(shù)暴区,但是在實(shí)際開(kāi)發(fā)中必須要自己編寫(xiě)一些函數(shù)來(lái)解決項(xiàng)目需求。
數(shù)組中很多方法類(lèi)似Array.map辛臊、Array.every仙粱、Array.some中都可以將一個(gè)函數(shù)作為參數(shù),因此他們都是高階函數(shù)彻舰。
數(shù)組方法都存在于Array.prototype中伐割,我們可以在Array.prototype上擴(kuò)展自己的方法。
1. map
<script>
Array.prototype.myMap = function (func) {
let results = [];
for (let i = 0; i < this.length; i++) {
results.push(func(this[i]));
}
return results;
}
const array = [1, 2, 3, 4];
const myMap1 = array.myMap(x => x * 2);
console.log(myMap1); // [2, 4, 6, 8]
</script>
與Array.map檢驗(yàn)
<script>
const array = [1, 2, 3, 4];
const myMap2 = array.map(x => x * 2);
console.log(myMap2); // [2, 4, 6, 8]
</script>
下一篇:一篇秒懂正則表達(dá)式https://mp.weixin.qq.com/s/voNtxibjDRDZIuSAtRHaiQ