JavaScript中的功能組成-js教程-PHP中文網

JavaScript 中函數組合的意義是什麼？

函數組合如何與高階函數的概念相關？

你能提供一個 JavaScript 中函數組合的實際示例嗎？

JavaScript 中函數組合和函數鏈之間有什麼區別？

函數組合如何幫助進行代碼測試和調試？

函數組合是否可以與 JavaScript 中的異步函數一起使用？

使用 JavaScript 中的函數組合的潛在缺點或挑戰是什麼？

函數組合如何與 JavaScript 中的柯里化概念相關？

函數組合是否可以與 React 或 Vue 等 JavaScript 框架一起使用？

有哪些庫或工具可以輔助 JavaScript 中的函數組合？

首頁

web前端

js教程

JavaScript中的功能組成

Lisa Kudrow

Feb 14, 2025 am 08:50 AM

Function Composition in JavaScript with Array.prototype.reduceRight

近年來，JavaScript 中的函數式編程越來越流行。雖然它的一些經常宣傳的原則（如不變性）需要運行時變通方案，但該語言對函數的一流處理證明了它對由這個基本原語驅動的可組合代碼的支持。在介紹如何從其他函數動態組合函數之前，讓我們簡要回顧一下。

關鍵要點

JavaScript 中的函數組合可以通過組合更簡單的函數來創建複雜的函數，從而提高代碼的可重用性和模塊化。這種方法簡化了代碼的理解、調試和測試，並鼓勵“不要重複自己”（DRY）的原則，減少了冗餘。
高階函數（可以將一個或多個函數作為參數，或返回一個函數作為結果）是 JavaScript 中函數組合的關鍵部分。它們用於通過組合現有函數來創建新函數。
JavaScript 將函數作為值處理，允許輕鬆組合更大、特定於上下文的作業。使用高階函數會導致分離它們的定義和調用。這可以使開發人員擺脫面向對象編程強加的嚴格層次結構約束。
函數組合可與 React 或 Vue 等 JavaScript 框架一起使用。在 React 中，組合組件以構建複雜的用戶界面是一種常見模式。類似地，Vue 的 mixin 系統可以看作是一種函數組合的形式。

什麼是函數？

實際上，函數是一個過程，它允許執行一組命令式步驟來執行副作用或返回值。例如：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

登入後複製

當此函數使用擁有 firstName 和 lastName 屬性的對象調用時，getFullName 將返回一個包含這兩個對應值的字符串：

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

登入後複製

值得注意的是，從 ES2015 開始，JavaScript 現在支持箭頭函數語法：

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

登入後複製

鑑於我們的 getFullName 函數的元數為 1（即單個參數）並且只有一個 return 語句，我們可以簡化此表達式：

const getFullName = person => `${person.firstName} ${person.surname}`;

登入後複製

這三個表達式，儘管方法不同，但最終都達到了相同的目的：

創建一個名為 getFullName 的函數，可以通過 name 屬性訪問。
接受一個參數 person。
返回一個計算出的字符串，其中包含 person.firstName 和 person.lastName，兩者之間用空格分隔。

通過返回值組合函數

除了將函數返回值分配給聲明（例如 const person = getPerson();）之外，我們還可以使用它們來填充其他函數的參數，或者一般來說，在 JavaScript 允許它們的地方提供值。假設我們有各自執行日誌記錄和 sessionStorage 副作用的函數：

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

登入後複製

我們可以使用嵌套調用對 getPerson 的返回值執行這些操作：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

登入後複製

鑑於需要根據調用的方式為函數提供所需的參數，因此最內層的函數將首先被調用。因此，在上面的示例中，getPerson 的返回值將傳遞給 log，而 log 的返回值將轉發給 store。通過組合函數調用來構建語句，我們最終可以從原子構建塊構建複雜的算法，但是嵌套這些調用可能會變得難以處理；如果我們想組合 10 個函數，那會是什麼樣子？

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

登入後複製

幸運的是，我們可以使用一個優雅的通用實現：將函數數組簡化為高階函數。

使用 Array.prototype.reduce 累積數組

Array 原型的 reduce 方法接受一個數組實例並將其累積為單個值。如果我們希望對數字數組求和，可以使用以下方法：

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

登入後複製

在此代碼段中，numbers.reduce 接受兩個參數：將在每次迭代時調用的回調函數，以及傳遞給該回調函數的total 參數的初始值；回調函數返回的值將在下一次迭代中傳遞給total。為了通過研究對 sum 的上述調用來進一步分解這一點：

我們的回調函數將運行 5 次
由於我們提供了一個初始值，因此在第一次調用時 total 將為 0
第一次調用將返回 0 2，導致 total 在第二次調用時解析為 2
此後續調用返回的結果 2 3 將在第三次調用等中提供給 total 參數

雖然回調函數接受另外兩個參數，它們分別表示當前索引和調用 Array.prototype.reduce 的數組實例，但前兩個是最關鍵的，通常被稱為：

累加器 – 上一次迭代回調函數返回的值。在第一次迭代中，這將解析為初始值，如果未指定初始值，則解析為數組中的第一個項目。
currentValue – 當前迭代的數組值；由於它是線性的，因此在 Array.prototype.reduce 的調用過程中，它將從 array[0] 進度到 array[array.length - 1]

使用 Array.prototype.reduce 組合函數

現在我們了解瞭如何將數組簡化為單個值，我們可以使用這種方法將現有函數組合成新函數：

const getFullName = person => `${person.firstName} ${person.surname}`;

登入後複製

請注意，我們使用 rest 參數語法 (...) 將任意數量的參數強制轉換為數組，從而使使用者無需為每個調用站點顯式創建新的數組實例。 compose 還返回另一個函數，這使得 compose 成為一個高階函數，它接受一個初始值 (initialArg)。這至關重要，因為我們因此可以組合新的、可重用的函數，而無需在必要之前調用它們；這被稱為惰性求值。

那麼我們如何將其他函數組合到單個高階函數中呢？

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

登入後複製

在此代碼中：

person 聲明將解析為 { firstName: 'Homer', surname: 'Simpson' }
person 的上述表示將輸出到瀏覽器的控制台
person 將被序列化為 JSON，然後在 person 密鑰下寫入 sessionStorage

調用順序的重要性

能夠使用可組合實用程序組合任意數量的函數使我們的代碼更簡潔、抽象性更好。但是，我們可以通過重新訪問內聯調用來突出一個重點：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

登入後複製

人們可能會發現用我們的 compose 函數複製這個是自然的：

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

登入後複製

在這種情況下，為什麼 fNested(4) === fComposed(4) 解析為 false？您可能記得我強調瞭如何首先解釋內部調用，因此 compose(g, h, i) 實際上等效於 x => i(h(g(x)))，因此 fNested 返回 10 而 fComposed 返回 9。我們可以簡單地反轉f 的嵌套或組合變體的調用順序，但是鑑於compose 旨在鏡像嵌套調用的特異性，我們需要一種方法以從右到左的順序減少函數；JavaScript 幸運地使用Array.prototype.reduceRight 提供了這一點：

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

登入後複製

使用此實現，fNested(4) 和 fComposed(4) 都解析為 10。但是，我們的 getPersonWithSideEffects 函數現在定義不正確；儘管我們可以反轉內部函數的順序，但在某些情況下，從左到右讀取可以促進對程序步驟的心理解析。事實證明，我們之前的方法已經相當普遍，但通常被稱為管道：

const getFullName = person => `${person.firstName} ${person.surname}`;

登入後複製

通過使用我們的 pipe 函數，我們將保持 getPersonWithSideEffects 所需的從左到右的順序。由於前面概述的原因，管道已成為 RxJS 的主要組成部分；從這個順序來看，思考由運算符操作的組合流中的數據流可能更直觀。

函數組合作為繼承的替代方案

我們已經在前面的示例中看到，如何將無限多個函數組合成更大、可重用、面向目標的單元。函數組合的另一個好處是使自己擺脫繼承圖的僵化性。假設我們希望根據類的層次結構重用日誌記錄和存儲行為；可以這樣表達：

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

登入後複製

除了冗長之外，這段代碼的直接問題是我們濫用繼承來實現重用；如果另一個類擴展 Loggable，它也固有地是 Storable 的子類，即使我們不需要此邏輯。一個潛在的更嚴重的問題在於命名衝突：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

登入後複製

如果我們要實例化MyState 並調用其store 方法，除非我們在MyState.prototype.store 中添加對super.store() 的調用，否則我們將不會調用Storable 的store 方法，但這會在State和Storable 之間創建一個緊密、脆弱的耦合。這可以使用實體系統或策略模式來緩解，正如我在其他地方所介紹的那樣，但是儘管繼承表達系統更廣泛分類法的優勢，函數組合提供了一種扁平的、簡潔的方法來共享不依賴於方法名稱的代碼。

總結

JavaScript 將函數作為值處理，以及生成它們的表達式，使其能夠輕鬆組合更大、特定於上下文的作業。將此任務視為函數數組的累積消除了對命令式嵌套調用的需求，並且使用高階函數會導致分離它們的定義和調用。此外，我們可以擺脫面向對象編程強加的嚴格層次結構約束。

關於 JavaScript 中函數組合的常見問題解答

JavaScript 中函數組合的意義是什麼？

函數組合是 JavaScript 和大型函數式編程中的一個基本概念。它允許開發人員通過組合更簡單的函數來創建複雜的函數，從而提高代碼的可重用性和模塊化。這種方法使代碼更容易理解、調試和測試。它還鼓勵“不要重複自己”（DRY）的原則，減少代碼庫中的冗餘。

函數組合如何與高階函數的概念相關？

高階函數是 JavaScript 中函數組合的關鍵部分。高階函數是可以將一個或多個函數作為參數、返回一個函數作為結果或同時執行這兩項操作的函數。在函數組合中，我們經常使用高階函數通過組合現有函數來創建新函數。

你能提供一個 JavaScript 中函數組合的實際示例嗎？

當然，讓我們考慮一個簡單的示例。假設我們有兩個函數，double 和 increment。 double 接受一個數字並將其乘以 2，而 increment 將 1 加到其輸入中。我們可以組合這兩個函數來創建一個新的函數，該函數將一個數字加倍，然後遞增結果。

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

登入後複製