JS高階函數原理與用法實例分析

要完全理解這個概念，首先必須了解函數式編程是什么一等函數(first-Class Function)以及的概念。

函數式編程

在大多數簡單的術語中，函數編程是一種編程形式，您可以將函數作為參數傳遞給其他函數，并將它們作為值返回。在函數式編程中，我們根據函數思考和編碼。

JavaScript，Haskell，Clojure，Scala和Erlang是實現函數式編程的一些語言。

一等函數

如果您一直在學習JavaScript，您可能聽說過JavaScript將函數視為一等公民。那是因為在JavaScript或任何其他函數式編程語言中，函數是對象。

在JavaScript中，函數是一種特殊類型的對象。他們是Function對象。

在JavaScript中，您可以使用其他類型（如對象，字符串或數字）執行的所有操作函數都可以執行。您可以將它們作為參數傳遞給其他函數（回調函數），將它們分配給變量并傳遞它們等等。這就是JavaScript中的函數被稱為First-Class函數(一等函數)的原因。

高階函數

高階函數是對其他函數進行操作的函數，可以將它們作為參數或通過返回它們。簡單來說，高階函數是一個函數，它接收函數作為參數或將函數作為輸出返回。

例如Array.prototype.map，Array.prototype.filter并且Array.prototype.reduce是一些高階功能，內置的語言。

運行高階函數

讓我們看一下內置高階函數的一些例子，看看它與我們不使用高階函數的解決方案的比較。

Array.prototype.map

該map()方法通過調用作為輸入數組中每個元素的參數提供的回調函數來創建一個新數組。該map()方法將從回調函數中獲取每個返回值，并使用這些值創建一個新數組。

傳遞給回調函數map()方法接受3個參數：element，index，和array。

假設我們有一個數組，我們想要創建一個新數組，其中包含第一個數組的每個值的兩倍。讓我們看看如何使用和不使用高階函數來解決問題。

不用高階函數

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);

創建我們自己的高階函數

到目前為止，我們看到了語言中內置的各種高階函數。現在讓我們創建自己的高階函數。

我們假設JavaScript沒有原生map方法。我們可以自己構建它，從而創建我們自己的高階函數。

假設我們有一個字符串數組，我們希望將此數組轉換為整數數組，其中每個元素表示原始數組中字符串的長度。

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);

在上面的例子中，我們創建了一個高階函數mapForEach，它接受一個數組和一個回調函數fn。此函數循環遍歷提供的數組，并在每次迭代時調用函數調用fn內的回調函數newArray.push。

回調函數fn接收數組的當前元素并返回該元素的長度，該元素存儲在newArray。for循環完成后，newArray返回并分配給lenArray。

結論

我們已經了解了高階函數和一個內置的高階函數。我們還學習了如何創建自己的高階函數。

簡而言之，高階函數是一個函數，它可以接收函數作為參數，甚至可以返回一個函數。高階函數就像常規函數一樣，具有接收和返回其他函數的附加能力，即參數和輸出。

更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com