快捷導(dǎo)航

在JavaScript中使用高階函數(shù)的方法

更新時(shí)間：2022年09月17日 16:48:47 作者：posted

JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點(diǎn)，使JavaScript成為非常適合函數(shù)式編程的編程語(yǔ)言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下

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

你也許聽(tīng)說(shuō)過(guò)，JavaScript函數(shù)是一等公民。這意味著，在JavaScript中函數(shù)是對(duì)象。

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

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

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

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

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

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

回調(diào)函數(shù)是一個(gè)在操作結(jié)束時(shí)執(zhí)行的函數(shù)，一旦所有其他操作完成后便會(huì)執(zhí)行。

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

JavaScript是一個(gè)單線(xiàn)程語(yǔ)言。這意味著同一時(shí)間只有一個(gè)操作會(huì)被執(zhí)行。

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

將一個(gè)函數(shù)作為參數(shù)傳入，并在父函數(shù)的其他操作完成后運(yùn)行該函數(shù)的能力，對(duì)于支持高階函數(shù)的語(yǔ)言來(lái)說(shuō)是至關(guān)重要的。

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

在處理可能在不確定的時(shí)間段后返回結(jié)果的資源時(shí)，傳遞回調(diào)函數(shù)的能力至關(guān)重要。

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

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

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

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

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

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

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

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

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

代碼可重用性

我們的proveIt()函數(shù)在結(jié)構(gòu)上獨(dú)立于它周?chē)拇a，總是返回被觸發(fā)的元素的id。這種函數(shù)設(shè)計(jì)的方法是函數(shù)式編程的核心。

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

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

在函數(shù)式編程中，我們?cè)噲D開(kāi)發(fā)不改變外部數(shù)據(jù)的純函數(shù)，并且每次對(duì)相同的輸入返回相同的結(jié)果。

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

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

當(dāng)你不帶括號(hào)傳遞一個(gè)函數(shù)的名字時(shí)，你傳遞的是函數(shù)對(duì)象本身。
當(dāng)你用圓括號(hào)傳遞函數(shù)時(shí)，你是在傳遞執(zhí)行該函數(shù)的結(jié)果。

返回函數(shù)

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

這是說(shuō)得通的，因?yàn)楹瘮?shù)是簡(jiǎn)單的對(duì)象。對(duì)象（包括函數(shù)）可以被定義為一個(gè)函數(shù)的返回值，就像字符串、數(shù)組或其他值。

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

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

假如你讀了太多關(guān)于"千禧一代"的文章，感到厭煩。你決定每當(dāng)出現(xiàn)"千禧一代"這個(gè)詞時(shí)，你都要用 "蛇人"這個(gè)短語(yǔ)來(lái)代替它。

你可能是簡(jiǎn)單地寫(xiě)一個(gè)函數(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.

這種寫(xiě)法是有效的，但不夠通用。你可能想為其他情況寫(xiě)一個(gè)替換函數(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.

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

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

高階函數(shù)模板

你真正想要的是能夠在模板函數(shù)中用任何其他術(shù)語(yǔ)替換任何術(shù)語(yǔ)的靈活性，并將該行為定義為一個(gè)基礎(chǔ)函數(shù)，你可以在此基礎(chǔ)上建立新的自定義函數(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.

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

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

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

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

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

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

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