JS高階函數(shù)原理與用法實(shí)例分析
本文實(shí)例講述了JS高階函數(shù)原理與用法。分享給大家供大家參考,具體如下:
如果您正在學(xué)習(xí)JavaScript,那么您必須遇到高階函數(shù)這個術(shù)語。這聽起來復(fù)雜,其實(shí)不然。
使JavaScript適合函數(shù)式編程的原因是它接受高階函數(shù)。
高階函數(shù)在JavaScript中廣泛使用。如果你已經(jīng)用JavaScript編程了一段時間,你可能已經(jīng)使用它們甚至不知道。
要完全理解這個概念,首先必須了解函數(shù)式編程是什么一等函數(shù)(first-Class Function)以及的概念。
函數(shù)式編程
在大多數(shù)簡單的術(shù)語中,函數(shù)編程是一種編程形式,您可以將函數(shù)作為參數(shù)傳遞給其他函數(shù),并將它們作為值返回。在函數(shù)式編程中,我們根據(jù)函數(shù)思考和編碼。
JavaScript,Haskell,Clojure,Scala和Erlang是實(shí)現(xiàn)函數(shù)式編程的一些語言。
一等函數(shù)
如果您一直在學(xué)習(xí)JavaScript,您可能聽說過JavaScript將函數(shù)視為一等公民。那是因?yàn)樵贘avaScript或任何其他函數(shù)式編程語言中,函數(shù)是對象。
在JavaScript中,函數(shù)是一種特殊類型的對象。他們是Function對象。
在JavaScript中,您可以使用其他類型(如對象,字符串或數(shù)字)執(zhí)行的所有操作函數(shù)都可以執(zhí)行。您可以將它們作為參數(shù)傳遞給其他函數(shù)(回調(diào)函數(shù)),將它們分配給變量并傳遞它們等等。這就是JavaScript中的函數(shù)被稱為First-Class函數(shù)(一等函數(shù))的原因。
高階函數(shù)
高階函數(shù)是對其他函數(shù)進(jìn)行操作的函數(shù),可以將它們作為參數(shù)或通過返回它們。簡單來說,高階函數(shù)是一個函數(shù),它接收函數(shù)作為參數(shù)或?qū)⒑瘮?shù)作為輸出返回。
例如Array.prototype.map
,Array.prototype.filter
并且Array.prototype.reduce
是一些高階功能,內(nèi)置的語言。
運(yùn)行高階函數(shù)
讓我們看一下內(nèi)置高階函數(shù)的一些例子,看看它與我們不使用高階函數(shù)的解決方案的比較。
Array.prototype.map
該map()
方法通過調(diào)用作為輸入數(shù)組中每個元素的參數(shù)提供的回調(diào)函數(shù)來創(chuàng)建一個新數(shù)組。該map()
方法將從回調(diào)函數(shù)中獲取每個返回值,并使用這些值創(chuàng)建一個新數(shù)組。
傳遞給回調(diào)函數(shù)map()
方法接受3個參數(shù):element,index,和array。
假設(shè)我們有一個數(shù)組,我們想要創(chuàng)建一個新數(shù)組,其中包含第一個數(shù)組的每個值的兩倍。讓我們看看如何使用和不使用高階函數(shù)來解決問題。
不用高階函數(shù)
const arr1 = [1,2,3]; const arr2 = []; for(let i = 0; i <arr1.length; i ++){ arr2.push(arr1 [i] * 2); } //打印[2,4,6] console.log(arr2);
使用高階函數(shù)
const arr1 = [1,2,3]; const arr2 = arr1.map (function (item) { return item * 2; } console.log(arr2)
我們可以使用箭頭函數(shù)語法使其更短
const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2);
創(chuàng)建我們自己的高階函數(shù)
到目前為止,我們看到了語言中內(nèi)置的各種高階函數(shù)。現(xiàn)在讓我們創(chuàng)建自己的高階函數(shù)。
我們假設(shè)JavaScript沒有原生map方法。我們可以自己構(gòu)建它,從而創(chuàng)建我們自己的高階函數(shù)。
假設(shè)我們有一個字符串?dāng)?shù)組,我們希望將此數(shù)組轉(zhuǎn)換為整數(shù)數(shù)組,其中每個元素表示原始數(shù)組中字符串的長度。
const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C']; function mapForEach(arr, fn) { const newArray = []; for(let i = 0; i < arr.length; i++) { newArray.push( fn(arr[i]) ); } return newArray; } const lenArray = mapForEach(strArray, function(item) { return item.length; }); // prints [ 10, 6, 3, 4, 1 ] console.log(lenArray);
在上面的例子中,我們創(chuàng)建了一個高階函數(shù)mapForEach,它接受一個數(shù)組和一個回調(diào)函數(shù)fn。此函數(shù)循環(huán)遍歷提供的數(shù)組,并在每次迭代時調(diào)用函數(shù)調(diào)用fn內(nèi)的回調(diào)函數(shù)newArray.push
。
回調(diào)函數(shù)fn接收數(shù)組的當(dāng)前元素并返回該元素的長度,該元素存儲在newArray。for循環(huán)完成后,newArray返回并分配給lenArray。
結(jié)論
我們已經(jīng)了解了高階函數(shù)和一個內(nèi)置的高階函數(shù)。我們還學(xué)習(xí)了如何創(chuàng)建自己的高階函數(shù)。
簡而言之,高階函數(shù)是一個函數(shù),它可以接收函數(shù)作為參數(shù),甚至可以返回一個函數(shù)。高階函數(shù)就像常規(guī)函數(shù)一樣,具有接收和返回其他函數(shù)的附加能力,即參數(shù)和輸出。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁,結(jié)合完整實(shí)例形式分析了javascript針對table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁顯示的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06微信小程序webview實(shí)現(xiàn)長按點(diǎn)擊識別二維碼功能示例
這篇文章主要介紹了微信小程序webview實(shí)現(xiàn)長按點(diǎn)擊識別二維碼功能,結(jié)合實(shí)例形式分析了webview二維碼識別相關(guān)操作技巧,需要的朋友可以參考下2019-01-01詳解maxlength屬性在textarea里奇怪的表現(xiàn)
這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關(guān)資料,需要的朋友可以參考下2015-12-12向大師們學(xué)習(xí)Javascript(視頻與PPT)
在開始之前,先與大家一起認(rèn)識下這篇文章的主角,世界級的javascript大牛們:Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas??疵忠苍S挺陌生,但是如果你對javascript還算熟悉,一定不會對他們的作品陌生。2009-12-12JavaScript Serializer序列化時間處理示例
JavaScriptSerializer序列化時間后會把時間序列化成N進(jìn)制的鬼數(shù)據(jù) ,下面有個示例,需要的朋友可以了解下2014-07-07JS創(chuàng)建優(yōu)美的頁面滑動塊效果 - Glider.js
JS創(chuàng)建優(yōu)美的頁面滑動塊效果 - Glider.js...2007-09-09javascript實(shí)現(xiàn)超好看的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超好看的3D煙花特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01Javascript 對象(object)合并操作實(shí)例分析
這篇文章主要介紹了Javascript 對象(object)合并操作,結(jié)合實(shí)例形式分析了javascript基于jQuery的extend方法、對象屬性、遍歷賦值等操作實(shí)現(xiàn)對象合并相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2019-07-07