【進階 6-1 期】JavaScript 高階函數淺析

更新：謝謝你們的支持，最近折騰了一個博客官網出來，方便你們系統閱讀，後續會有更多內容和更多優化，猛戳這裏查看

------ 如下是正文 ------

引言

本期開始介紹 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];

參考解析：扁平化並去重

參考文章

理解 JavaScript 中的高階函數

Array.prototype.map()

Array.prototype.filter()

Array.prototype.reduce()

文章穿梭機

• 【進階5-3期】深刻探究 Function & Object 雞蛋問題

• 【進階5-2期】圖解原型鏈及其繼承優缺點

• 【進階5-1期】從新認識構造函數、原型和原型鏈

交流

進階系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/yygmind/blo…

我是木易楊，公衆號「高級前端進階」做者，跟着我每週重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！