核心要點

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

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

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

性能：注意事項

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

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

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

使用 Map

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

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

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

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

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

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

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

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

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

這種方法的另一個優(yōu)點是，我們有機會通過分離命名函數(shù)來提高其多功能性，從而在過程中生成更簡潔的代碼。匿名內(nèi)聯(lián)函數(shù)可能看起來很凌亂，並且使代碼重用變得更加困難。我們可以定義一個名為 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)？僅僅將映射作為您的工具包的一部分就可以將您的代碼提升到一個全新的函數(shù)式級別。

什麼是函子？

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

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

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

這是在您下次 JavaScript 聚會上可以討論的一個話題。

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

使用 Reduce

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

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

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

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

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

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

由於在調(diào)用 reduce() 方法時集成了匿名內(nèi)聯(lián)函數(shù)的定義，這可能看起來比需要復(fù)雜一點。讓我們再次這樣做，但讓我們首先定義一個命名函數(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]

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

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

結(jié)論

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

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

本文由 Panayiotis Velisarakos、Tim Severien 和 Dan Prince 共同評審。感謝所有 SitePoint 的同行評審者，使 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ù)組的每個元素來創(chuàng)建一個新數(shù)組。它不會修改原始數(shù)組，而是返回一個新數(shù)組。另一方面，Reduce 函數(shù)用於將數(shù)組簡化為單個值。它按順序?qū)⒑瘮?shù)應(yīng)用於數(shù)組的每個元素，以便將其簡化為單個輸出值。

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

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

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

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

我可以在 JavaScript 中同時使用 Map 和 Reduce 嗎？

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

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

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

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

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

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

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

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

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

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

JavaScript 中的 Reduce 函數(shù)通常用於將數(shù)組的元素組合成單個輸出值。一些常見用例包括求和數(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)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！