高階函數(shù)簡(jiǎn)介

高階函數(shù) 的英文名叫 Higher-Order Function ，是 函數(shù)式編程 中的一種。他的表現(xiàn)形式往往是通過(guò)把函數(shù)作為參數(shù)傳入另一個(gè)函數(shù)，或者將函數(shù)作為另一個(gè)函數(shù)的返回值返回。在實(shí)際開(kāi)發(fā)業(yè)務(wù)中， 高階函數(shù)往往可以抽象我們的代碼 ，將我們的命令式編程轉(zhuǎn)換為復(fù)用性更高級(jí)的函數(shù)式編程，從而 提升我們的代碼質(zhì)量 。

下面拿3個(gè)面試中常問(wèn)的高階函數(shù)舉例子，希望看完以后能夠提升大家對(duì)JS的理解，提高我們的代碼質(zhì)量。 chat is cheap，show you my code~

Array.map()

功能介紹

map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。 map() 方法按照原始數(shù)組元素順序依次處理元素。

tips

注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。 注意： map() 不會(huì)改變?cè)紨?shù)組。

實(shí)用意義及代碼舉例

//如果我們需要將一個(gè)數(shù)組中，每一項(xiàng)元素全都*2， //最基礎(chǔ)的作法，是剛學(xué)JS時(shí)的循環(huán)遍歷，再每一項(xiàng)中執(zhí)行*2的操作，例如： let arr1 = [0,1,2,3,4,5,6]; let arr2 = []; for (let i = 0;i<arr1.length;i++){ arr2.push(arr1[i]*2) } console.log(arr2) //[0, 2, 4, 6, 8, 10, 12] //這樣確實(shí)可以達(dá)到效果，但是這屬于命令式編程； //換做Map高階函數(shù)的方法實(shí)現(xiàn)起來(lái)，只需要1行,復(fù)用性也會(huì)更強(qiáng)。 let arr1 = [0,1,2,3,4,5,6]; let arr2 = arr1.map((item)=> item*2) console.log(arr2) //[0, 2, 4, 6, 8, 10, 12]

總結(jié)：

針對(duì)數(shù)組中每一項(xiàng)都要做的操作，可以實(shí)用map方法

Array.reduce()

功能介紹

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終計(jì)算為一個(gè)值。reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose。

tips:

注意: reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

實(shí)用意義及代碼舉例

//如果有一個(gè)需求，需要我們將數(shù)組中每一項(xiàng)求和 //實(shí)用reduce,可以優(yōu)雅簡(jiǎn)潔的實(shí)現(xiàn)： let arr1 = [0,1,2,3,4,5,6]; let arr2 = arr1.reduce((prev,cur)=>{ //prev代表之前所有項(xiàng)的最終結(jié)果，cur代表當(dāng)前項(xiàng)的值 return prev+cur },0) //這里的0是初始項(xiàng)傳入的值，這里寫為0 console.log(arr2) //21 求和完畢 //reduce也可以用于數(shù)組去重 let arr1 = [0,1,2,3,4,5,6,5,6,7,6]; let arr2 = arr1.reduce((prev,cur)=>{ //當(dāng)之前所有項(xiàng)不包含當(dāng)前項(xiàng)元素時(shí)，push，否則直接返回之前所有去重項(xiàng)。 prev.indexOf(cur) === -1 && prev.push(cur); return prev },[]) //傳入空數(shù)組作為初始值 console.log(arr2) //[0, 1, 2, 3, 4, 5, 6, 7]

總結(jié)：

針對(duì)數(shù)組中所有的項(xiàng)累計(jì)計(jì)算的操作，最終輸入一個(gè)值，可以使用reduce方法

Array.filter()

功能介紹

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

tips

注意： filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。注意： filter() 不會(huì)改變?cè)紨?shù)組。

實(shí)用代碼舉例

//例如，需求為獲取數(shù)組中所有大于等于4的元素，將他們組成一個(gè)數(shù)組 let arr1 = [0,1,2,3,4,5,6,5,6,7,6]; let arr2 = arr1.filter((item)=>{ return item >= 4 },[]) console.log(arr2) //[4, 5, 6, 5, 6, 7, 6]

總結(jié)：

對(duì)于數(shù)組中每一項(xiàng)的篩選功能，可以使用filter方法

Array.flat()

功能介紹

flat() 方法可以將嵌套數(shù)組（多為數(shù)組）降維，變成低維數(shù)組或者一維數(shù)組。(數(shù)組攤平展開(kāi))

tips

注意： 存在一定兼容性問(wèn)題，例如IE不兼容

實(shí)用代碼舉例

let arr1 = [0,1,2,3,4,5,[1,2,3],[1,2,[1,2,3,4]],6,7,6]; let arr2 = arr1.flat(1) //flat中傳入需要降維的層數(shù)，默認(rèn)是1，如果有個(gè)三維數(shù)組他會(huì)被降級(jí)為二位數(shù)組， let arr3 = arr1.flat(Infinity) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, 1, 2, 3, 4, 6, 7, 6] //如果不管是幾維數(shù)組，需要得到1維數(shù)組的話，可以直接使用Infinity console.log(arr2) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, [1,2,3,4], 6, 7, 6]

以上就是詳解JavaScript 高階函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 高階函數(shù)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！