引言
本期開始介紹 JavaScript 中的高階函式，在 JavaScript 中，函式是一種特殊型別的物件，它們是 Function objects。那什麼是高階函式呢？本節將通過高階函式的定義來展開介紹。
高階函式
高階函式英文叫 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 );
// 10
console.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 );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]
複製程式碼上面是沒有 initialValue 的情況，程式碼的執行過程如下，callback 總共呼叫四次。
| callback | accumulator | currentValue | currentIndex | array | return value |
|---|---|---|---|---|---|
| first call | 0 | 1 | 1 | [0, 1, 2, 3, 4] | 1 |
| second call | 1 | 2 | 2 | [0, 1, 2, 3, 4] | 3 |
| third call | 3 | 3 | 3 | [0, 1, 2, 3, 4] | 6 |
| fourth call | 6 | 4 | 4 | [0, 1, 2, 3, 4] | 10 |
有 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 );
// 20
console.log( arr );
// [0, 1, 2, 3, 4]
複製程式碼程式碼的執行過程如下所示，callback 總共呼叫五次。
| callback | accumulator | currentValue | currentIndex | array | return value |
|---|---|---|---|---|---|
| first call | 10 | 0 | 0 | [0, 1, 2, 3, 4] | 10 |
| second call | 10 | 1 | 1 | [0, 1, 2, 3, 4] | 11 |
| third call | 11 | 2 | 2 | [0, 1, 2, 3, 4] | 13 |
| fourth call | 13 | 3 | 3 | [0, 1, 2, 3, 4] | 16 |
| fifth call | 16 | 4 | 4 | [0, 1, 2, 3, 4] | 20 |
函式作為返回值輸出
這個很好理解，就是返回一個函式，下面直接看兩個例子來加深理解。
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'); // true
isType('Array')([1, 2, 3]); // true
isType('Number')(123); // true
複製程式碼這裡就是一個高階函式，因為 isType 函式將 obj => { ... } 這一函式作為返回值輸出。
add 函式
我們看一個常見的面試題，用 JS 實現一個無限累加的函式 add，示例如下：
add(1); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(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); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10
複製程式碼思考題
已知如下陣列，編寫一個程式將陣列扁平化去併除其中重複部分資料，最終得到一個升序且不重複的陣列
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
參考解析：扁平化並去重
參考文章
文章穿梭機
交流
進階系列文章彙總如下，覺得不錯點個Star，歡迎 加群 互相學習。
我是木易楊，公眾號「高階前端進階」作者，跟著我每週重點攻克一個前端面試重難點。接下來讓我帶你走進高階前端的世界，在進階的路上，共勉！