JS高階函數原理與用法實例分析
本文實例講述了JS高階函數原理與用法。分享給大家供大家參考,具體如下:
如果您正在學習JavaScript,那么您必須遇到高階函數這個術語。這聽起來復雜,其實不然。
使JavaScript適合函數式編程的原因是它接受高階函數。
高階函數在JavaScript中廣泛使用。如果你已經用JavaScript編程了一段時間,你可能已經使用它們甚至不知道。
要完全理解這個概念,首先必須了解函數式編程是什么一等函數(first-Class Function)以及的概念。
函數式編程
在大多數簡單的術語中,函數編程是一種編程形式,您可以將函數作為參數傳遞給其他函數,并將它們作為值返回。在函數式編程中,我們根據函數思考和編碼。
JavaScript,Haskell,Clojure,Scala和Erlang是實現函數式編程的一些語言。
一等函數
如果您一直在學習JavaScript,您可能聽說過JavaScript將函數視為一等公民。那是因為在JavaScript或任何其他函數式編程語言中,函數是對象。
在JavaScript中,函數是一種特殊類型的對象。他們是Function對象。
在JavaScript中,您可以使用其他類型(如對象,字符串或數字)執(zhí)行的所有操作函數都可以執(zhí)行。您可以將它們作為參數傳遞給其他函數(回調函數),將它們分配給變量并傳遞它們等等。這就是JavaScript中的函數被稱為First-Class函數(一等函數)的原因。
高階函數
高階函數是對其他函數進行操作的函數,可以將它們作為參數或通過返回它們。簡單來說,高階函數是一個函數,它接收函數作為參數或將函數作為輸出返回。
例如Array.prototype.map,Array.prototype.filter并且Array.prototype.reduce是一些高階功能,內置的語言。
運行高階函數
讓我們看一下內置高階函數的一些例子,看看它與我們不使用高階函數的解決方案的比較。
Array.prototype.map
該map()方法通過調用作為輸入數組中每個元素的參數提供的回調函數來創(chuàng)建一個新數組。該map()方法將從回調函數中獲取每個返回值,并使用這些值創(chuàng)建一個新數組。
傳遞給回調函數map()方法接受3個參數:element,index,和array。
假設我們有一個數組,我們想要創(chuàng)建一個新數組,其中包含第一個數組的每個值的兩倍。讓我們看看如何使用和不使用高階函數來解決問題。
不用高階函數
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);
使用高階函數
const arr1 = [1,2,3];
const arr2 = arr1.map (function (item) {
return item * 2;
}
console.log(arr2)
我們可以使用箭頭函數語法使其更短
const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2);
創(chuàng)建我們自己的高階函數
到目前為止,我們看到了語言中內置的各種高階函數?,F在讓我們創(chuàng)建自己的高階函數。
我們假設JavaScript沒有原生map方法。我們可以自己構建它,從而創(chuàng)建我們自己的高階函數。
假設我們有一個字符串數組,我們希望將此數組轉換為整數數組,其中每個元素表示原始數組中字符串的長度。
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)建了一個高階函數mapForEach,它接受一個數組和一個回調函數fn。此函數循環(huán)遍歷提供的數組,并在每次迭代時調用函數調用fn內的回調函數newArray.push。
回調函數fn接收數組的當前元素并返回該元素的長度,該元素存儲在newArray。for循環(huán)完成后,newArray返回并分配給lenArray。
結論
我們已經了解了高階函數和一個內置的高階函數。我們還學習了如何創(chuàng)建自己的高階函數。
簡而言之,高階函數是一個函數,它可以接收函數作為參數,甚至可以返回一個函數。高階函數就像常規(guī)函數一樣,具有接收和返回其他函數的附加能力,即參數和輸出。
更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
JavaScript使用鏈式方法封裝jQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈式方法封裝jQuery中CSS()方法,結合具體實例形式分析了JS采用鏈式操作方法封住jQuery中連綴操作實現css()方法的相關技巧,需要的朋友可以參考下2017-04-04

