核心要點(diǎn)

• JavaScript原生Array對(duì)象的map()和reduce()方法是強(qiáng)大的函數(shù)式編程工具，可以使代碼更簡(jiǎn)潔、易讀且易於維護(hù)。
• map()是基本的函數(shù)式編程技術(shù)，它作用於數(shù)組中的所有元素，並生成另一個(gè)長(zhǎng)度相同的數(shù)組，其中包含轉(zhuǎn)換後的內(nèi)容。通過向數(shù)組對(duì)象添加映射功能，ECMAScript 5 將基本的數(shù)組類型變成了一個(gè)完整的函子，使函數(shù)式編程更容易上手。
• reduce()方法（也是ECMAScript 5中的新增方法）類似於map()，但它不是生成另一個(gè)函子，而是生成單個(gè)結(jié)果，該結(jié)果可以是任何類型。它按順序?qū)⒑瘮?shù)應(yīng)用於數(shù)組的每個(gè)元素，以便將數(shù)組簡(jiǎn)化為單個(gè)輸出值。
• 雖然map()和reduce()方法可能會(huì)影響性能，但如今使用它們帶來的代碼質(zhì)量和開發(fā)人員滿意度的提升，很可能超過對(duì)性能的任何暫時(shí)影響。作者建議使用函數(shù)式技術(shù)進(jìn)行開發(fā)，並在實(shí)際情況下衡量影響，然後再?zèng)Q定map()和reduce()是否適合某個(gè)應(yīng)用程序。

ECMAScript 6 的眾多令人驚嘆的新特性相關(guān)的流程討論甚囂塵上，很容易讓人忘記ECMAScript 5 為我們?cè)贘avaScript 中支持函數(shù)式編程提供了一些很棒的工具，而這些工具我們今天就可以使用。其中包括基於 JavaScript Array 對(duì)象的原生 map() 和 reduce() 方法。

如果您現(xiàn)在還沒有使用 map() 和 reduce()，那麼現(xiàn)在就開始吧！大多數(shù)現(xiàn)代 JavaScript 平臺(tái)都原生支持 ECMAScript 5。映射和規(guī)約可以使您的代碼更簡(jiǎn)潔、更易於閱讀和維護(hù)，並引導(dǎo)您走向更優(yōu)雅的函數(shù)式開發(fā)。

性能：注意事項(xiàng)

當(dāng)然，在需要的情況下，必須將代碼的閱讀和維護(hù)與性能相平衡。目前，瀏覽器使用更繁瑣的傳統(tǒng)技術(shù)（例如for循環(huán)）的效率更高。

我的方法通常是首先編寫易於閱讀和維護(hù)的代碼，然後如果我在實(shí)際情況下注意到問題，則優(yōu)化性能。過早優(yōu)化是萬惡之源。

還值得考慮的是，隨著瀏覽器對(duì) map() 和 reduce() 進(jìn)行優(yōu)化，使用這些方法可能會(huì)更好地利用 JavaScript 引擎的改進(jìn)。除非我面臨性能問題，否則我更喜歡樂觀地編寫代碼，並將使我的代碼不那麼吸引人的性能調(diào)整放在我的後備口袋裡，以防我需要它們。

使用 Map

映射是作用於數(shù)組中所有元素並生成另一個(gè)長(zhǎng)度相同的數(shù)組（包含轉(zhuǎn)換後的內(nèi)容）的基本函數(shù)式編程技術(shù)。

為了更具體一些，讓我們想出一個(gè)簡(jiǎn)單的用例。例如，假設(shè)您有一個(gè)單詞數(shù)組，您需要將其轉(zhuǎn)換為包含每個(gè)單詞長(zhǎng)度的數(shù)組。 （我知道，這並不是您通常需要為複雜的應(yīng)用程序執(zhí)行的那種複雜的火箭科學(xué)，但是理解它在這種簡(jiǎn)單情況下的工作原理將幫助您在它可以為您的代碼增加實(shí)際價(jià)值的情況下應(yīng)用它）。

您可能已經(jīng)知道如何使用數(shù)組上的for循環(huán)來完成我剛才描述的操作。它可能看起來像這樣：

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

我們所做的只是定義了一些變量：一個(gè)名為animals 的數(shù)組，其中包含我們的單詞；一個(gè)名為lengths 的空數(shù)組，它將包含我們操作的輸出；以及一個(gè)名為item 的變量，用於臨時(shí)存儲(chǔ)我們將要在數(shù)組的每個(gè)循環(huán)中操作的每個(gè)項(xiàng)目。我們使用一個(gè)帶有臨時(shí)內(nèi)部計(jì)數(shù)器變量的for循環(huán)和一個(gè)loops變量來優(yōu)化我們的for循環(huán)。然後，我們迭代了直到 animals 數(shù)組長(zhǎng)度的每個(gè)項(xiàng)目。對(duì)於每一個(gè)項(xiàng)目，我們計(jì)算其長(zhǎng)度，並將其推送到 lengths 數(shù)組中。

注意：可以說，我們可以通過直接將 animals[count] 的長(zhǎng)度推送到 lengths 數(shù)組而無需中間賦值來更簡(jiǎn)潔地完成此操作。這將節(jié)省我們一些代碼，但也會(huì)使代碼的可讀性降低，即使對(duì)於這個(gè)非常簡(jiǎn)單的示例也是如此。同樣，為了使它更有效率，但不太直接，我們可以使用已知的 animals 數(shù)組長(zhǎng)度來初始化我們的 lengths 數(shù)組為 new Array(animals.length)，然後通過索引插入項(xiàng)目而不是使用 push。這完全取決於您將在現(xiàn)實(shí)世界中如何使用代碼。

這種方法在技術(shù)上沒有任何問題。它應(yīng)該在任何標(biāo)準(zhǔn)的 JavaScript 引擎中都能工作，並且它將完成工作。但是，一旦您知道如何使用 map()，這樣做就會(huì)顯得笨拙。

讓我向您展示我們?nèi)绾问褂?map() 來處理這個(gè)問題：

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

在這種情況下，我們?cè)俅螐?animals 數(shù)組變量開始。但是，我們聲明的唯一其他變量是 lengths，我們將它的值直接賦值給將匿名內(nèi)聯(lián)函數(shù)映射到 animals 數(shù)組的每個(gè)元素的結(jié)果。該匿名函數(shù)對(duì)每個(gè)動(dòng)物執(zhí)行操作，返回長(zhǎng)度。結(jié)果，lengths 成為與原始 animals 數(shù)組長(zhǎng)度相同的數(shù)組，包含每個(gè)單詞的長(zhǎng)度。

關(guān)於這種方法需要注意幾點(diǎn)。首先，它比原來的方法短得多。其次，我們必須聲明的變量要少得多。變量越少，全局命名空間中的噪聲就越少，如果同一代碼的其他部分使用相同名稱的變量，則衝突的機(jī)會(huì)就越少。此外，我們的變量從頭到尾都不需要更改其值。當(dāng)您深入研究函數(shù)式編程時(shí)，您將欣賞使用常量和不可變變量的優(yōu)雅能力，而且現(xiàn)在就開始學(xué)習(xí)也為時(shí)不晚。

這種方法的另一個(gè)優(yōu)點(diǎn)是，我們有機(jī)會(huì)通過分離命名函數(shù)來提高其多功能性，從而在過程中生成更簡(jiǎn)潔的代碼。匿名內(nèi)聯(lián)函數(shù)可能看起來很凌亂，並且使代碼重用變得更加困難。我們可以定義一個(gè)名為 getLength() 的函數(shù)，並通過這種方式在上下文中使用它：

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

看看這看起來多麼乾淨(jìng)？?jī)H僅將映射作為您的工具包的一部分就可以將您的代碼提升到一個(gè)全新的函數(shù)式級(jí)別。

什麼是函子？

有趣的是，通過向數(shù)組對(duì)象添加映射功能，ECMAScript 5 將基本的數(shù)組類型變成了一個(gè)完整的函子，使函數(shù)式編程更容易為我們所有人所用。

根據(jù)經(jīng)典的函數(shù)式編程定義，函子滿足三個(gè)條件：

1. 它包含一組值
2. 它實(shí)現(xiàn)一個(gè)作用於每個(gè)元素的映射函數(shù)
3. 它的映射函數(shù)返回大小相同的函子

這是在您下次 JavaScript 聚會(huì)上可以討論的一個(gè)話題。

如果您想了解更多關(guān)於函子的信息，請(qǐng)查看 Mattias Petter Johansson 的這個(gè)精彩視頻。

使用 Reduce

reduce() 方法也是 ECMAScript 5 中的新增方法，它類似於 map()，不同之處在於它不是生成另一個(gè)函子，而是生成單個(gè)結(jié)果，該結(jié)果可以是任何類型。例如，假設(shè)您想將 animals 數(shù)組中所有單詞的長(zhǎng)度之和作為一個(gè)數(shù)字。您可能會(huì)從以下操作開始：

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

在定義初始數(shù)組後，我們?yōu)檫\(yùn)行總計(jì)創(chuàng)建一個(gè)變量 total，最初設(shè)置為零。我們還創(chuàng)建了一個(gè)變量 item 來保存 animals 數(shù)組在遍歷for循環(huán)時(shí)的每次迭代，以及一個(gè)變量 count 用於循環(huán)計(jì)數(shù)器，以及一個(gè) loops 變量來優(yōu)化我們的迭代。然後，我們運(yùn)行一個(gè)for循環(huán)來迭代 animals 數(shù)組中的所有單詞，並將每個(gè)單詞賦值給 item 變量。最後，我們將每個(gè)項(xiàng)目的長(zhǎng)度添加到我們的總計(jì)中。

同樣，這種方法在技術(shù)上沒有任何問題。我們從一個(gè)數(shù)組開始，最終得到一個(gè)結(jié)果。但是，使用 reduce() 方法，我們可以使這個(gè)過程更直接：

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

這裡發(fā)生的情況是，我們正在定義一個(gè)新變量 total，並將其賦值給使用兩個(gè)參數(shù)減少 animals 數(shù)組的結(jié)果：一個(gè)匿名內(nèi)聯(lián)函數(shù)和一個(gè)初始運(yùn)行總計(jì)值零。減少會(huì)遍歷數(shù)組中的每個(gè)項(xiàng)目，對(duì)該項(xiàng)目執(zhí)行函數(shù)，並將其添加到傳遞給下一次迭代的運(yùn)行總計(jì)中。這裡我們的內(nèi)聯(lián)函數(shù)有兩個(gè)參數(shù)：運(yùn)行總和和當(dāng)前正在從數(shù)組中處理的單詞。該函數(shù)將 total 的當(dāng)前值添加到當(dāng)前單詞的長(zhǎng)度。

請(qǐng)注意，我們將 reduce() 的第二個(gè)參數(shù)設(shè)置為零，這表明 total 將包含一個(gè)數(shù)字。如果沒有第二個(gè)參數(shù)，reduce 方法仍然可以工作，但結(jié)果不一定是您期望的結(jié)果。 （試一試，看看當(dāng)省略運(yùn)行總計(jì)時(shí)，JavaScript 使用的邏輯是什麼。）

由於在調(diào)用 reduce() 方法時(shí)集成了匿名內(nèi)聯(lián)函數(shù)的定義，這可能看起來比需要復(fù)雜一點(diǎn)。讓我們?cè)俅芜@樣做，但讓我們首先定義一個(gè)命名函數(shù)，而不是使用匿名內(nèi)聯(lián)函數(shù)：

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

這個(gè)稍微長(zhǎng)一些，但長(zhǎng)並不總是壞事。以這種方式查看它應(yīng)該使 reduce 方法發(fā)生的事情更清晰一些。

reduce() 方法有兩個(gè)參數(shù)：一個(gè)應(yīng)用於數(shù)組中每個(gè)元素的函數(shù)，以及一個(gè)用於運(yùn)行總計(jì)的初始值。在這種情況下，我們傳遞一個(gè)名為 addLength 的新函數(shù)的名稱和運(yùn)行總計(jì)的初始值零。我們創(chuàng)建了 addLength() 函數(shù)，以便它也接受兩個(gè)參數(shù)：運(yùn)行總和和要處理的字符串。

結(jié)論

養(yǎng)成定期使用map() 和reduce() 的習(xí)慣將為您提供替代方法，使您的代碼更簡(jiǎn)潔、更通用、更易於維護(hù)，並為您鋪平使用更多函數(shù)式JavaScript 技術(shù)的道路。

map() 和 reduce() 方法只是添加到 ECMAScript 5 的新方法中的兩個(gè)。很可能，您今天使用它們所看到的代碼質(zhì)量和開發(fā)人員滿意度的提高將遠(yuǎn)遠(yuǎn)超過對(duì)性能的任何暫時(shí)影響。使用函數(shù)式技術(shù)進(jìn)行開發(fā)，並在現(xiàn)實(shí)世界中衡量影響，然後再?zèng)Q定 map() 和 reduce() 是否適合您的應(yīng)用程序。

本文由 Panayiotis Velisarakos、Tim Severien 和 Dan Prince 共同評(píng)審。感謝所有 SitePoint 的同行評(píng)審者，使 SitePoint 內(nèi)容達(dá)到最佳狀態(tài)！

關(guān)於函數(shù)式 JavaScript 中 Map-Reduce 的常見問題 (FAQ)

JavaScript 中 Map 和 Reduce 之間的區(qū)別是什麼？

在 JavaScript 中，Map 和 Reduce 都是作用於數(shù)組的高階函數(shù)。 Map 函數(shù)用於通過將函數(shù)應(yīng)用於原始數(shù)組的每個(gè)元素來創(chuàng)建一個(gè)新數(shù)組。它不會(huì)修改原始數(shù)組，而是返回一個(gè)新數(shù)組。另一方面，Reduce 函數(shù)用於將數(shù)組簡(jiǎn)化為單個(gè)值。它按順序?qū)⒑瘮?shù)應(yīng)用於數(shù)組的每個(gè)元素，以便將其簡(jiǎn)化為單個(gè)輸出值。

Map 函數(shù)在 JavaScript 中是如何工作的？

JavaScript 中的 Map 函數(shù)通過從現(xiàn)有數(shù)組創(chuàng)建一個(gè)新數(shù)組來工作。它通過將指定的函數(shù)應(yīng)用於原始數(shù)組中的每個(gè)元素來實(shí)現(xiàn)此目的。該函數(shù)按順序?yàn)閿?shù)組中的每個(gè)元素調(diào)用一次。結(jié)果是一個(gè)包含函數(shù)調(diào)用結(jié)果的新數(shù)組。

Reduce 函數(shù)在 JavaScript 中是如何工作的？

JavaScript 中的 Reduce 函數(shù)通過按順序?qū)⒑瘮?shù)應(yīng)用於數(shù)組中的每個(gè)元素，以便將數(shù)組簡(jiǎn)化為單個(gè)輸出值來工作。輸出值是函數(shù)調(diào)用的累積結(jié)果。該函數(shù)接受兩個(gè)參數(shù)：累加器和當(dāng)前值。累加器累積函數(shù)調(diào)用的返回值。

我可以在 JavaScript 中同時(shí)使用 Map 和 Reduce 嗎？

是的，您可以在 JavaScript 中同時(shí)使用 Map 和 Reduce。事實(shí)上，它們經(jīng)常在函數(shù)式編程中一起使用。您可以使用 Map 函數(shù)轉(zhuǎn)換數(shù)組中的每個(gè)元素，然後使用 Reduce 函數(shù)將轉(zhuǎn)換後的元素組合成單個(gè)輸出值。

JavaScript 中 Map 和 ForEach 之間的區(qū)別是什麼？

Map 和 ForEach 都是 JavaScript 中作用於數(shù)組的高階函數(shù)。它們之間的主要區(qū)別在於，Map 通過將函數(shù)應(yīng)用於原始數(shù)組的每個(gè)元素來創(chuàng)建一個(gè)新數(shù)組，而 ForEach 應(yīng)用於數(shù)組的每個(gè)元素以獲得其副作用。 ForEach 不會(huì)返回新數(shù)組。

我如何使用 Map 函數(shù)在 JavaScript 中轉(zhuǎn)換數(shù)組？

您可以使用 JavaScript 中的 Map 函數(shù)通過將函數(shù)應(yīng)用於數(shù)組的每個(gè)元素來轉(zhuǎn)換數(shù)組。該函數(shù)按順序?yàn)閿?shù)組中的每個(gè)元素調(diào)用一次。結(jié)果是一個(gè)包含函數(shù)調(diào)用結(jié)果的新數(shù)組。

我如何使用 Reduce 函數(shù)在 JavaScript 中組合數(shù)組的元素？

您可以使用 JavaScript 中的 Reduce 函數(shù)將數(shù)組的元素組合成單個(gè)輸出值。該函數(shù)按順序應(yīng)用於數(shù)組中的每個(gè)元素，輸出值是函數(shù)調(diào)用的累積結(jié)果。

Map 函數(shù)在 JavaScript 中的一些常見用例是什麼？

JavaScript 中的 Map 函數(shù)通常用於通過將函數(shù)應(yīng)用於數(shù)組的每個(gè)元素來轉(zhuǎn)換數(shù)組。一些常見用例包括將字符串轉(zhuǎn)換為數(shù)字、更改字符串的大小寫以及從對(duì)像中提取屬性。

Reduce 函數(shù)在 JavaScript 中的一些常見用例是什麼？

JavaScript 中的 Reduce 函數(shù)通常用於將數(shù)組的元素組合成單個(gè)輸出值。一些常見用例包括求和數(shù)字、查找最大值或最小值以及連接字符串。

如何調(diào)試 JavaScript 中的 Map 或 Reduce 函數(shù)？

您可以通過在函數(shù)中使用 console.log 語句來顯示變量和表達(dá)式的值來調(diào)試 JavaScript 中的 Map 或 Reduce 函數(shù)。您還可以使用 debugger 語句暫停執(zhí)行並在 Web 瀏覽器的開發(fā)者工具中檢查變量和表達(dá)式的值。

以上是使用地圖並減少功能性JavaScript的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！