高階函數

高階函數英文叫 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]