掌握 JavaScript 中的高階函數

現代 JavaScript 開發嚴重依賴函數式編程，掌握其基本思想將極大提升你的編碼能力。 高階函數是這個範式最有力的武器之一。為了幫助您掌握它們，本文將介紹它們的定義、應用程式和獨特的實作。

1. 函數式程式設計

函數式程式設計是一種程式設計範式，強調：

• 純函數：沒有副作用的函數，對於相同的輸入傳回相同的輸出。
• 不變性：資料不會改變；相反，會建立新的資料結構。
• 一等函數：函數被視為值。
• 高階函數：對其他函數進行運算的函數。

透過遵守這些原則，函數式程式設計可確保程式碼乾淨、可預測且可維護。

---

2. 一流的功能

在 JavaScript 中，函數是一等公民。這意味著：

1. 函數可以賦值給變數：

   const greet = function(name) {
       return `Hello, ${name}!`;
   };
   console.log(greet("Alice")); // Output: Hello, Alice!

1. 函數可以當作參數傳遞：

   function applyFunction(value, func) {
       return func(value);
   }
   const square = x => x * x;
   console.log(applyFunction(5, square)); // Output: 25

1. 函數可以從其他函數傳回：

   function multiplier(factor) {
       return num => num * factor;
   }
   const double = multiplier(2);
   console.log(double(4)); // Output: 8

---

3. 高階函數

高階函數是：

• 將另一個函數作為參數，或
• 傳回一個函數作為結果。

JavaScript 範例：

• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.reduce()

這些內建方法展示了高階函數的優雅和實用性。

---

4. Array.prototype.map()

map() 方法透過對陣列的每個元素應用回調函數來建立一個新陣列。

範例：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

這裡，map() 對每個元素執行回調，在不改變原始陣列的情況下轉換陣列。

---

5. Array.prototype.filter()

filter() 方法傳回一個新數組，其中包含滿足給定條件的元素。

範例：

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

此方法非常適合從陣列中提取特定元素。

---

6. 建立自己的高階函數

要真正理解高階函數，創建自己的函數是有益的。讓我們實作一個自訂版本的map()：

function customMap(array, callback) {
    const result = [];
    for (let i = 0; i < array.length; i++) {
        result.push(callback(array[i], i, array));
    }
    return result;
}

const numbers = [1, 2, 3, 4];
const doubled = customMap(numbers, num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

在此範例中：

• customMap() 迭代數組。
• 回呼函數應用於每個元素。
• 結果被推入新數組並傳回。

---

7. 組合高階函數

高階函數組合起來會變得更強大。例如：

範例：

   const greet = function(name) {
       return `Hello, ${name}!`;
   };
   console.log(greet("Alice")); // Output: Hello, Alice!

這裡，filter() 和 map() 連結在一起，以乾淨且富有表現力的方式處理陣列。

---

8. 高階函數的好處

• 程式碼可重複使用性：編寫可以與任何回呼一起使用的通用函數。
• 清晰度：抽象掉循環和重複邏輯。
• 函數組合：用於複雜轉換的鏈函數。

---

9. 結論

編寫現代、有效的 JavaScript 需要了解高階函數。除了減少重複和啟用功能組合等強大模式之外，它們還封裝了邏輯。透過學習和使用內建和客製化的實現，您可以提高程式設計能力並編寫更清晰、更易於維護的程式碼。

追蹤我：Github Linkedin

以上是掌握 JavaScript 中的高階函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！