本文實(shí)例講述了JS高階函數(shù)原理與用法。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括陜州網(wǎng)站建設(shè)、陜州網(wǎng)站制作、陜州網(wǎng)頁制作以及陜州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，陜州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到陜州省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

如果您正在學(xué)習(xí)JavaScript，那么您必須遇到高階函數(shù)這個術(shù)語。這聽起來復(fù)雜，其實(shí)不然。

使JavaScript適合函數(shù)式編程的原因是它接受高階函數(shù)。

高階函數(shù)在JavaScript中廣泛使用。如果你已經(jīng)用JavaScript編程了一段時(shí)間，你可能已經(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ù)組，并在每次迭代時(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ì)有所幫助。

分享文章：JS高階函數(shù)原理與用法實(shí)例分析
文章起源：http://m.newbst.com/article22/jeepjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站建設(shè)、網(wǎng)站制作、面包屑導(dǎo)航、做網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)