JavaScript 高階函式-有解無憂

一、高階函式

JavaScript 中的高階函式是一種接受函式作為輸入或回傳函式作為輸出的函式，它們提供了靈活的方式來處理函式，并允許把函式作為引數或回傳值傳遞，它們是函式式編程的重要組成部分，并且可以提高代碼的可讀性和可維護性，

高階函式的一個常見用法是對陣列進行操作，例如使用 map()、reduce() 和 filter()，這些函式允許您在陣列上應用自定義的函式，并對陣列的每個元素執行操作，

另一個常見的高階函式是回呼函式，回呼函式是一種被傳遞到另一個函式中的函式，并在某些事件發生時被呼叫，它們允許您創建代碼，該代碼在事件發生時自動執行，

另外，高階函式還可以用于創建抽象概念，例如柯里化、組合和管道，柯里化是一種將多個引數的函式轉換為一系列接受單個引數的函式的技術，組合是將多個函陣列合成一個新函式的技術，管道是一種通過將函式的輸出作為下一個函式的輸入來鏈接多個函式的技術，

高階函式也可以與閉包結合使用，閉包是一種函式，它參考了定義它的作用域之外的變數，這使得您可以在函式外訪問函式內部的變數，并將變數保存在記憶體中以供以后使用，

高階函式是 JavaScript 編程的重要概念，具有很多用途，并且可以提高代碼的復雜性，學習如何使用高階函式，并將其與其他技術結合起來，可以使您的代碼更加強大和高效，

一個常見的 JavaScript 高階函式示例是 Array.prototype.map()：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

在這個例子中，我們創建了一個陣列，然后使用 map() 函式對陣列中的每個元素進行操作，我們傳遞了一個回呼函式，該回呼函式接受一個數字，并回傳該數字的兩倍，

另一個常見的高階函式示例是 Array.prototype.reduce()：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 15

在這個例子中，我們使用 reduce() 函式對陣列中的所有元素進行操作，我們傳遞了一個回呼函式，該回呼函式接受當前的總和和數字，并回傳新的總和，

這些示例說明了高階函式的強大功能，以及如何將其與其他技術（例如回呼函式）結合起來，以實作復雜的操作，

二、使用高階函式實作函式柯里化

柯里化是一種高階函式的技術，可以將多個引數的函式轉換為只有一個引數的函式，這可以使我們在需要的時候再傳遞其他引數，并逐步構建出完整的函式，

以下是 JavaScript 使用高階函式實作柯里化的示例：

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(null, args);
    } else {
      return function(...args2) {
        return curried.apply(null, args.concat(args2));
      };
    }
  };
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
const add5 = curriedAdd(5);
console.log(add5(10, 15)); // 30

在這個例子中，我們創建了一個 curry() 函式，該函式接受一個函式作為引數，并回傳一個新函式，該新函式使用 apply() 方法應用所有引數，如果傳遞的引數數量不夠，則回傳一個新的函式，該函式將傳遞的引數與當前的引數合并，

然后，我們使用 curry() 函式對 add() 函式進行柯里化，并創建了一個只接受一個引數的函式，該引數為 5，我們可以使用此函式來逐步構建出完整的函式，并使用最后兩個引數計算結果，

三、使用高階函式實作組合函式

組合函式是一種將多個函式結合起來以創建新函式的技術，在 JavaScript 中，可以使用高階函式實作組合函式，

以下是使用高階函式實作組合函式的示例：

function compose(f, g) {
  return function(x) {
    return f(g(x));
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const composed = compose(add, double);
console.log(composed(3)); // 7

在這個例子中，我們創建了一個 compose() 函式，該函式接受任意數量的函式作為引數，并回傳一個新函式，

然后，我們使用 compose() 函式將 double() 和 add() 函陣列合在一起，并使用組合函式對數字 3 進行計算，因此，先呼叫 double(3)，再呼叫 add(6)，最后得到結果 7，

以下是另一種使用高階函式實作組合函式的示例：

function compose(...fns) {
  return function(arg) {
    return fns.reduceRight((result, fn) => fn(result), arg);
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const composed = compose(double, add);
console.log(composed(3)); // 8

在這個例子中，我們創建了一個 compose() 函式，該函式接受任意數量的函式作為引數，并回傳一個新函式，該新函式使用 reduceRight() 函式對所有函式進行組合，并對給定的引數進行計算，

然后，我們使用 compose() 函式將 double() 和 add() 函陣列合在一起，并使用組合函式對數字 3 進行計算，因此，先呼叫 add(3)，再呼叫 double(4)，最后得到結果 8，

四、使用高階函式實作管道

管道是一種將多個函式連接起來以進行順序計算的技術，在 JavaScript 中，可以使用高階函式實作管道，

以下是使用高階函式實作管道的示例：

function pipe(...fns) {
  return function(arg) {
    return fns.reduce((result, fn) => fn(result), arg);
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const piped = pipe(add, double);
console.log(piped(3)); // 8

在這個例子中，我們創建了一個 pipe() 函式，該函式接受任意數量的函式作為引數，并回傳一個新函式，該新函式使用 reduce() 函式對所有函式進行管道，并對給定的引數進行計算，

然后，我們使用 pipe() 函式將 add() 和 double() 函式管道在一起，并使用管道函式對數字 3 進行計算，因此，先呼叫 add(3)，再呼叫 double(4)，最后得到結果 8，

五、組合函式和管道的區別

管道和組合函式都是高階函式的應用，但是它們有著明顯的不同：

實作方式：管道是通過將多個函式連接起來，依次對資料進行處理，而組合函式則是通過將多個函陣列合成一個函式，
計算順序：管道函式的計算順序是從左到右，而組合函式的計算順序是從右到左，
結構：管道函式的結構是一維的，每一步的結果都是下一步的輸入；而組合函式的結構是二維的，一個函式的結果可以作為另一個函式的輸入，

因此，管道和組合函式都是高階函式的重要應用，在不同的場景中使用它們都有著獨特的優勢，

作者：yuzhihui

出處：https://www.cnblogs.com/yuzhihui/p/17100954.html

宣告：歡迎任何形式的轉載，但請務必注明出處！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543317.html

標籤：JavaScript

上一篇：一篇文章帶你掌握Flex布局的所有用法

下一篇：Axios