將另一個函數(shù)作為參數(shù)的函數(shù)，或者定義一個函數(shù)作為返回值的函數(shù)，被稱為高階函數(shù)。

JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點，使JavaScript成為非常適合函數(shù)式編程的編程語言之一。

JavaScript將函數(shù)視為一等公民

你也許聽說過，JavaScript函數(shù)是一等公民。這意味著，在JavaScript中函數(shù)是對象。

它們的類型是Object，它們可以作為一個變量的值被分配，而且它們可以像其他引用變量一樣被傳遞和返回。

一等函數(shù)賦予了JavaScript特殊的能力，使我們能夠從高階函數(shù)中獲益。

由于函數(shù)是對象，且JavaScript是流行的編程語言之一，因此其支持函數(shù)式編程的原生方法。

事實上，一等函數(shù)是JavaScript的原生方法。我敢打賭你在使用他們的時候甚至都沒有想過正在使用函數(shù)。

高階函數(shù)接收函數(shù)作為參數(shù)

如果你做過很多JavaScript開發(fā)，你可能遇到過使用回調函數(shù)的情況。

回調函數(shù)是一個在操作結束時執(zhí)行的函數(shù)，一旦所有其他操作完成后便會執(zhí)行。

通常情況下，我們把這個函數(shù)作為最后的參數(shù)傳遞，在其他參數(shù)之后。它通常被定義為內聯(lián)的匿名函數(shù)?；卣{函數(shù)依靠的是JavaScript處理高階函數(shù)的能力。

JavaScript是一個單線程語言。這意味著同一時間只有一個操作會被執(zhí)行。

為了避免操作或系統(tǒng)的主線程互相阻塞（這將導致死鎖），引擎會確保所有操作按順序執(zhí)行。它們沿著這個單線程排隊，直到安全產(chǎn)生另一個代碼事務。

將一個函數(shù)作為參數(shù)傳入，并在父函數(shù)的其他操作完成后運行該函數(shù)的能力，對于支持高階函數(shù)的語言來說是至關重要的。

JavaScript中的回調函數(shù)允許異步行為，因此腳本可以在等待結果的同時繼續(xù)執(zhí)行其他函數(shù)或操作。

在處理可能在不確定的時間段后返回結果的資源時，傳遞回調函數(shù)的能力至關重要。

這種高階函數(shù)模式在網(wǎng)絡開發(fā)中非常有用。一個腳本可以向服務器發(fā)送一個請求，然后需要在響應到來時進行處理，而不需要了解服務器的網(wǎng)絡延遲或處理時間。

Node.js經(jīng)常使用回調函數(shù)來有效地利用服務器資源。這種異步方法對于等待用戶輸入后再執(zhí)行函數(shù)的應用程序來說也很有用。

考慮一下這個簡單的JavaScript片段，它為一個按鈕添加了一個事件監(jiān)聽器。

document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});

這段腳本使用內聯(lián)匿名函數(shù)來顯示一個alert。

但它也可以很容易地使用一個單獨定義的函數(shù)，并將這個命名函數(shù)傳遞給addEventListener方法。

var proveIt = function() {
alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);

我們這樣做不僅僅是展示了高階函數(shù)。我們使代碼更可讀，更有彈性，并為不同的任務分離了功能（監(jiān)聽點擊事件與提醒用戶）。

代碼可重用性

我們的proveIt()函數(shù)在結構上獨立于它周圍的代碼，總是返回被觸發(fā)的元素的id。這種函數(shù)設計的方法是函數(shù)式編程的核心。

這段代碼可以存在于任何你用元素的id顯示alert的上下文中，并且可以被任何事件監(jiān)聽器調用。

用一個單獨定義和命名的函數(shù)取代內聯(lián)函數(shù)的能力為我們提供了無限可能。

在函數(shù)式編程中，我們試圖開發(fā)不改變外部數(shù)據(jù)的純函數(shù)，并且每次對相同的輸入返回相同的結果。

現(xiàn)在我們有了一個基本的工具，可以幫助我們開發(fā)一個小型的、有針對性的高階函數(shù)庫，你可以在任何應用程序中使用。

請注意，我們把 proveIt 而不是 proveIt() 傳遞給我們的 addEventListener 函數(shù)。

• 當你不帶括號傳遞一個函數(shù)的名字時，你傳遞的是函數(shù)對象本身。
• 當你用圓括號傳遞函數(shù)時，你是在傳遞執(zhí)行該函數(shù)的結果。

返回函數(shù)

除了將函數(shù)作為參數(shù)之外，JavaScript還允許函數(shù)將其他函數(shù)作為結果返回。

這是說得通的，因為函數(shù)是簡單的對象。對象（包括函數(shù)）可以被定義為一個函數(shù)的返回值，就像字符串、數(shù)組或其他值。

但是函數(shù)作為結果返回是什么意思呢？

函數(shù)是分解問題和創(chuàng)建可重用代碼片斷的一種強大方式。當我們將一個函數(shù)定義為一個高階函數(shù)的返回值時，它可以作為新函數(shù)的模板。

假如你讀了太多關于"千禧一代"的文章，感到厭煩。你決定每當出現(xiàn)"千禧一代"這個詞時，你都要用 "蛇人"這個短語來代替它。

你可能是簡單地寫一個函數(shù)，在你傳遞給它的任何文本上執(zhí)行該文本替換。

var snakify = function(text) {
return text.replace(/millenials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.

這種寫法是有效的，但不夠通用。你可能想為其他情況寫一個替換函數(shù)：

var hippify = function(text) {
return text.replace(/baby boomers/ig, "Aging Hippies");
};
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.

但是，如果你決定要做一些更復雜的事情來保留原始字符串中的大小寫呢？你將不得不修改你的兩個新函數(shù)來做到這一點。

這很麻煩，而且會使你的代碼更加脆弱，也更難閱讀。在這樣的情況下，我們可以使用高階函數(shù)作為解決方案。

高階函數(shù)模板

你真正想要的是能夠在模板函數(shù)中用任何其他術語替換任何術語的靈活性，并將該行為定義為一個基礎函數(shù)，你可以在此基礎上建立新的自定義函數(shù)。

有了將函數(shù)指定為返回值的能力，JavaScript提供了讓這種情況更便捷的方法：

var attitude = function(original, replacement, source) {
	return function(source) {
		return source.replace(original, replacement);
	};
};

var snakify = attitude(/millenials/ig, "Snake People");
var hippify = attitude(/baby boomers/ig, "Aging Hippies");

console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.
console.log(hippify("The Baby Boomers just look the other way."));
	// The Aging Hippies just look the other way.

我們所做的是把做實際工作的代碼隔離到一個通用的、可擴展的attitude函數(shù)中。它封裝了所有需要修改任何輸入字符串的工作：使用原始短語作為初始值，并輸出一個具有某種態(tài)度的替換短語。

當我們將這個新函數(shù)定義為對attitude高階函數(shù)的引用，并預先填入它所接收的前兩個參數(shù)時，我們會得到什么？它允許新函數(shù)接收你傳遞給它的任何文本，并在我們定義的返回函數(shù)中使用該參數(shù)作為attitude函數(shù)的輸出。

JavaScript函數(shù)不關心傳遞給它們的參數(shù)的數(shù)量。

如果缺少第二個參數(shù)，函數(shù)將把它視為undefined。當我們選擇不提供第三個參數(shù)，或任何數(shù)量的額外參數(shù)時，它也會這樣做。

此外，你可以在以后再傳入那個額外的參數(shù)。你可以在定義了你想調用的高階函數(shù)后這樣做，就像剛才演示的那樣。

我們正在創(chuàng)建一個模板高階函數(shù)來返回另一個函數(shù)。然后，我們把這個新返回的函數(shù)，除去一個屬性，定義為模板函數(shù)的一個自定義實現(xiàn)。

你以這種方式創(chuàng)建的所有函數(shù)將繼承高階函數(shù)的工作代碼。然而，你可以用不同的默認參數(shù)預先定義它們。

正在使用高階函數(shù)

高階函數(shù)對于JavaScript的工作方式來說是起碼的，你已經(jīng)在使用它們了。

每當你傳遞一個匿名函數(shù)或回調函數(shù)時，你實際上是把所傳遞的函數(shù)返回的值，作為另一個函數(shù)的參數(shù)（如箭頭函數(shù)）使用。

開發(fā)人員在學習JavaScript的早期就熟悉高階函數(shù)。它是JavaScript設計中固有的，所以以后才需要學習驅動箭頭函數(shù)或回調的概念。

為返回其他函數(shù)的函數(shù)賦值的能力擴展了JavaScript的便利性。高階函數(shù)允許我們創(chuàng)建自定義命名的函數(shù)，用一階函數(shù)的共享模板代碼執(zhí)行專門的任務。

這些函數(shù)中的每一個都可以繼承高階函數(shù)中的任何改進。這可以協(xié)助我們避免代碼重復，并保持我們的源代碼的整潔和可讀性。

如果你確保你的函數(shù)是純凈的（它們不改變外部值，并且對于任何給定的輸入總是返回相同的值），你可以創(chuàng)建測試來驗證當你更新一階函數(shù)時，你的代碼變化不會破壞任何東西。

總結

現(xiàn)在你知道了高階函數(shù)的工作原理，你可以開始考慮如何在自己的項目中利用這個概念了。

JavaScript的一個好處是，你可以將函數(shù)技術與你已經(jīng)熟悉的代碼混合在一起。

即便你一開始只是為了使用高階函數(shù)而使用，你也會很快熟悉它們所提供的額外靈活性。

現(xiàn)在使用高階函數(shù)的一點工作可以在未來幾年內改善你的代碼。

到此這篇關于如何在JavaScript中使用高階函數(shù)的文章就介紹到這了,更多相關js高階函數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論