高階函數

高階函數英文叫 Higher-order function，它的定義很簡單，就是至少滿足下列一個條件的函數：

• 接受一個或多個函數作為輸入
• 輸出一個函數

也就是說高階函數是對其他函數進行操作的函數，可以將它們作為參數傳遞，或者是返回它們。 簡單來說，高階函數是一個接收函數作為參數傳遞或者將函數作為返回值輸出的函數。

函數作為參數傳遞

JavaScript 語言中內置了一些高階函數，比如 Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce，它們接受一個函數作為參數，并應用這個函數到列表的每一個元素。我們來看看使用它們與不使用高階函數的方案對比。

Array.prototype.map

map() 方法創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果，原始數組不會改變。傳遞給 map 的回調函數（callback）接受三個參數，分別是 currentValue、index（可選）、array（可選），除了 callback 之外還可以接受 this 值（可選），用于執行 callback 函數時使用的this 值。

來個簡單的例子方便理解，現在有一個數組 [1, 2, 3, 4]，我們想要生成一個新數組，其每個元素皆是之前數組的兩倍，那么我們有下面兩種使用高階和不使用高階函數的方式來實現。

不使用高階函數

// 木易楊const arr1 = [1, 2, 3, 4];const arr2 = [];for (let i = 0; i < arr1.length; i++) {arr2.push( arr1[i] * 2);}console.log( arr2 );// [2, 4, 6, 8]console.log( arr1 );// [1, 2, 3, 4]

使用高階函數

// 木易楊const arr1 = [1, 2, 3, 4];const arr2 = arr1.map(item => item * 2);console.log( arr2 );// [2, 4, 6, 8]console.log( arr1 );// [1, 2, 3, 4]

Array.prototype.filter

filter() 方法創建一個新數組, 其包含通過提供函數實現的測試的所有元素，原始數組不會改變。接收的參數和 map 是一樣的，其返回值是一個新數組、由通過測試的所有元素組成，如果沒有任何數組元素通過測試，則返回空數組。

來個例子介紹下，現在有一個數組 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]，我們想要生成一個新數組，這個數組要求沒有重復的內容，即為去重。

不使用高階函數

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];const arr2 = [];for (let i = 0; i < arr1.length; i++) {if (arr1.indexOf( arr1[i] ) === i) {arr2.push( arr1[i] );}}console.log( arr2 );// [1, 2, 3, 5, 4]console.log( arr1 );// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

使用高階函數

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];const arr2 = arr1.filter( (element, index, self) => {return self.indexOf( element ) === index;});console.log( arr2 );// [1, 2, 3, 5, 4]console.log( arr1 );// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

Array.prototype.reduce

reduce() 方法對數組中的每個元素執行一個提供的 reducer 函數(升序執行)，將其結果匯總為單個返回值。傳遞給 reduce 的回調函數（callback）接受四個參數，分別是累加器 accumulator、currentValue、currentIndex（可選）、array（可選），除了 callback 之外還可以接受初始值 initialValue 值（可選）。

• 如果沒有提供 initialValue，那么第一次調用 callback 函數時，accumulator 使用原數組中的第一個元素，currentValue 即是數組中的第二個元素。 在沒有初始值的空數組上調用 reduce 將報錯。
• 如果提供了 initialValue，那么將作為第一次調用 callback 函數時的第一個參數的值，即 accumulator，currentValue 使用原數組中的第一個元素。

來個簡單的例子介紹下，現在有一個數組 [0, 1, 2, 3, 4]，需要計算數組元素的和，需求比較簡單，來看下代碼實現。

不使用高階函數

const arr = [0, 1, 2, 3, 4];let sum = 0;for (let i = 0; i < arr.length; i++) {sum += arr[i];}console.log( sum );// 10console.log( arr );// [0, 1, 2, 3, 4]

使用高階函數

無 initialValue 值

const arr = [0, 1, 2, 3, 4];let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {return accumulator + currentValue;});console.log( sum );// 10console.log( arr );// [0, 1, 2, 3, 4]

上面是沒有 initialValue 的情況，代碼的執行過程如下，callback 總共調用四次。

有 initialValue 值

我們再來看下有 initialValue 的情況，假設 initialValue 值為 10，我們看下代碼。

const arr = [0, 1, 2, 3, 4];let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {return accumulator + currentValue;}, 10);console.log( sum );// 20console.log( arr );// [0, 1, 2, 3, 4]

代碼的執行過程如下所示，callback 總共調用五次。

函數作為返回值輸出

這個很好理解，就是返回一個函數，下面直接看兩個例子來加深理解。

isType 函數

我們知道在判斷類型的時候可以通過 Object.prototype.toString.call 來獲取對應對象返回的字符串，比如：

let isString = obj => Object.prototype.toString.call( obj ) === '[object String]';let isArray = obj => Object.prototype.toString.call( obj ) === '[object Array]';let isNumber = obj => Object.prototype.toString.call( obj ) === '[object Number]';

可以發現上面三行代碼有很多重復代碼，只需要把具體的類型抽離出來就可以封裝成一個判斷類型的方法了，代碼如下。

let isType = type => obj => {return Object.prototype.toString.call( obj ) === '[object ' + type + ']';}isType('String')('123'); // trueisType('Array')([1, 2, 3]); // trueisType('Number')(123); // true

這里就是一個高階函數，因為 isType 函數將 obj => { ... } 這一函數作為返回值輸出。

add 函數

我們看一個常見的面試題，用 JS 實現一個無限累加的函數 add，示例如下：

add(1); // 1add(1)(2); // 3add(1)(2)(3)； // 6add(1)(2)(3)(4)； // 10 // 以此類推

我們可以看到結構和上面代碼有些類似，都是將函數作為返回值輸出，然后接收新的參數并進行計算。

我們知道打印函數時會自動調用 toString()方法，函數 add(a) 返回一個閉包 sum(b)，函數 sum() 中累加計算 a = a + b，只需要重寫sum.toString()方法返回變量 a 就可以了。

function add(a) {function sum(b) { // 使用閉包a = a + b; // 累加return sum;}sum.toString = function() { // 重寫toString()方法return a;}return sum; // 返回一個函數}add(1); // 1add(1)(2); // 3add(1)(2)(3)； // 6add(1)(2)(3)(4)； // 10 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。