JavaScript 的多功能性：面向?qū)ο蟆⒚钍胶秃瘮?shù)式編程

JavaScript 的強(qiáng)大之處在於其多功能性，它支持面向?qū)ο缶幊?、命令式編程和函?shù)式編程。開發(fā)者可以根據(jù)項(xiàng)目需求和團(tuán)隊(duì)偏好靈活切換編程範(fàn)式。

ES5 引入了 map、reduce 和 filter 等原生數(shù)組方法，極大地方便了函數(shù)式編程。其中，filter 方法能夠遍歷數(shù)組中的每個(gè)元素，根據(jù)指定的測(cè)試條件判斷是否將其添加到新的數(shù)組中。

使用 filter 方法簡(jiǎn)化代碼

filter 方法使代碼更簡(jiǎn)潔清晰。它遍歷數(shù)組中的每個(gè)元素，並應(yīng)用測(cè)試函數(shù)。如果測(cè)試函數(shù)返回 true，則該元素將包含在 filter 方法返回的新數(shù)組中。

filter 方法與 ES5 的其他兩個(gè)函數(shù)式數(shù)組方法 map 和 reduce 協(xié)同工作，可以組合使用，創(chuàng)建簡(jiǎn)潔高效的代碼，同時(shí)保持原始數(shù)組不變。

雖然 filter 方法可能比 for 循環(huán)略慢，但其帶來的代碼簡(jiǎn)潔性和可維護(hù)性優(yōu)勢(shì)使其成為推薦的實(shí)踐方式。隨著 JavaScript 引擎的優(yōu)化，其性能有望進(jìn)一步提升。

本文由 Dan Prince、Vildan Softic 和 Joan Yinn 審核。感謝所有 SitePoint 的同行評(píng)審者，讓 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)！

我喜歡 JavaScript 的一個(gè)原因是它的靈活性。它允許你使用面向?qū)ο缶幊?、命令式編程，甚至函?shù)式編程，並且可以根據(jù)你的當(dāng)前需求以及團(tuán)隊(duì)的偏好和期望在它們之間切換。

雖然 JavaScript 支持函數(shù)式技術(shù)，但它不像 Haskell 或 Scala 那樣針對(duì)純函數(shù)式編程進(jìn)行優(yōu)化。雖然我通常不會(huì)將我的 JavaScript 程序構(gòu)建成 100% 的函數(shù)式，但我喜歡使用函數(shù)式編程的概念來幫助我保持代碼的簡(jiǎn)潔性，並專注於設(shè)計(jì)易於重用和測(cè)試的代碼。

使用 filter 方法過濾數(shù)據(jù)集

ES5 的出現(xiàn)，使 JavaScript 數(shù)組繼承了一些使函數(shù)式編程更加方便的方法。 JavaScript 數(shù)組現(xiàn)在可以原生進(jìn)行映射、規(guī)約和過濾。每種方法都遍歷數(shù)組中的每個(gè)項(xiàng)目，無需循環(huán)或局部狀態(tài)更改，即可執(zhí)行分析，返回可立即使用或進(jìn)一步操作的結(jié)果。在本文中，我想向你介紹過濾。過濾允許你評(píng)估數(shù)組的每個(gè)項(xiàng)目，並根據(jù)你傳入的測(cè)試條件，確定是否返回包含該元素的新數(shù)組。當(dāng)你使用 Array 的 filter 方法時(shí)，你將得到另一個(gè)數(shù)組，該數(shù)組的長(zhǎng)度與原始數(shù)組相同或更短，包含與你設(shè)置的條件匹配的原始數(shù)組中的子集項(xiàng)目。

使用循環(huán)演示過濾

一個(gè)可能受益於過濾的簡(jiǎn)單問題的例子是將字符串?dāng)?shù)組限制為只有三個(gè)字符的字符串。這不是一個(gè)複雜的問題，我們可以使用普通的 JavaScript for 循環(huán)和不使用 filter 方法來輕鬆地解決它。它可能看起來像這樣：

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

我們?cè)谶@裡做的是定義一個(gè)包含三個(gè)字符串的數(shù)組，並創(chuàng)建一個(gè)空數(shù)組，我們可以在其中只存儲(chǔ)只有三個(gè)字符的字符串。我們定義了一個(gè)計(jì)數(shù)變量，在遍歷數(shù)組時(shí)在 for 循環(huán)中使用。每次我們遇到一個(gè)恰好有三個(gè)字符的字符串時(shí)，我們都會(huì)將其推入我們新的空數(shù)組中。完成後，我們只需記錄結(jié)果。沒有什麼能阻止我們?cè)谘h(huán)中修改原始數(shù)組，但是這樣做會(huì)永久丟失原始值。創(chuàng)建一個(gè)新數(shù)組並保持原始數(shù)組不變要乾淨(jìng)得多。

使用 filter 方法

我們這樣做並沒有什麼技術(shù)上的錯(cuò)誤，但是 Array 上 filter 方法的可用性使我們能夠使我們的代碼更加簡(jiǎn)潔和直接。以下是如何使用 filter 方法完成完全相同的事情的示例：

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

和以前一樣，我們從包含原始數(shù)組的變量開始，我們?yōu)閷⒅话哂腥齻€(gè)字符的字符串的數(shù)組定義了一個(gè)新變量。但在這種情況下，當(dāng)我們定義第二個(gè)數(shù)組時(shí)，我們將其直接賦值給將 filter 方法應(yīng)用於原始 animals 數(shù)組的結(jié)果。我們將一個(gè)匿名內(nèi)聯(lián)函數(shù)傳遞給 filter，該函數(shù)只有在其操作的值長(zhǎng)度為 3 時(shí)才返回 true。 filter 方法的工作方式是遍歷數(shù)組中的每個(gè)元素並將測(cè)試函數(shù)應(yīng)用於該元素。如果測(cè)試函數(shù)對(duì)該元素返回 true，則 filter 方法返回的數(shù)組將包含該元素。其他元素將被跳過。你可以看到代碼看起來簡(jiǎn)潔了多少。即使事先不了解 filter 的作用，你也可以查看這段代碼並弄清楚它的意圖。函數(shù)式編程的一個(gè)好處是減少了要跟蹤的局部狀態(tài)的數(shù)量，並限制了從函數(shù)內(nèi)部修改外部變量，從而提高了代碼的簡(jiǎn)潔性。在這種情況下，計(jì)數(shù)變量以及我們?cè)诒闅v原始數(shù)組時(shí) threeLetterAnimals 數(shù)組所採用的各種狀態(tài)只是更多需要跟蹤的狀態(tài)。使用 filter，我們已經(jīng)設(shè)法消除了 for 循環(huán)以及計(jì)數(shù)變量。我們不像以前那樣多次更改新數(shù)組的值。我們只定義它一次，並為其分配從將我們的過濾器條件應(yīng)用於原始數(shù)組中獲得的值。

其他格式化過濾器的方法

如果我們利用 const 聲明和匿名內(nèi)聯(lián)箭頭函數(shù)，我們的代碼可以更簡(jiǎn)潔。這些是 EcmaScript 6 (ES6) 功能，現(xiàn)在大多數(shù)瀏覽器和 JavaScript 引擎都原生支持。

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

雖然在大多數(shù)情況下最好超越舊語法，除非你需要使你的代碼與現(xiàn)有代碼庫匹配，但選擇它很重要。隨著我們變得越來越簡(jiǎn)潔，我們的每一行代碼都變得越來越複雜。使 JavaScript 如此有趣的部分原因在於你可以嘗試使用許多方法來設(shè)計(jì)相同的代碼，以優(yōu)化大小、效率、清晰度或可維護(hù)性，以適應(yīng)團(tuán)隊(duì)的偏好。但這同時(shí)也給團(tuán)隊(duì)帶來了更大的負(fù)擔(dān)，需要?jiǎng)?chuàng)建共享的樣式指南並討論每個(gè)選擇的優(yōu)缺點(diǎn)。在這種情況下，為了使我們的代碼更具可讀性和通用性，我們可能希望採用上面的匿名內(nèi)聯(lián)箭頭函數(shù)並將其轉(zhuǎn)換為傳統(tǒng)的命名函數(shù)，然後將該命名函數(shù)直接傳遞到filter方法中。代碼可能如下所示：

const animals = ["cat","dog","fish"];
const threeLetterAnimals = animals.filter(item => item.length === 3);
console.log(threeLetterAnimals); // ["cat", "dog"]

我們?cè)谶@裡所做的只是提取上面定義的匿名內(nèi)聯(lián)箭頭函數(shù)並將其轉(zhuǎn)換為單獨(dú)的命名函數(shù)。正如我們所看到的，我們已經(jīng)定義了一個(gè)純函數(shù)，它採用數(shù)組元素的適當(dāng)值類型，並返回相同的類型。我們可以直接將該函數(shù)的名稱作為條件傳遞給 filter 方法。

(後續(xù)內(nèi)容，關(guān)於 map、reduce 和鍊式調(diào)用的部分，由於篇幅限制，請(qǐng)自行根據(jù)原文補(bǔ)充。) 保持原文的圖片和格式。

以上是過濾和鏈接功能JavaScript的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！