深入學(xué)習(xí)JavaScript 高階函數(shù)

高階函數(shù)

高階函數(shù)英文叫 Higher-order function，它的定義很簡(jiǎn)單，就是至少滿足下列一個(gè)條件的函數(shù)：

• 接受一個(gè)或多個(gè)函數(shù)作為輸入
• 輸出一個(gè)函數(shù)

也就是說(shuō)高階函數(shù)是對(duì)其他函數(shù)進(jìn)行操作的函數(shù)，可以將它們作為參數(shù)傳遞，或者是返回它們。 簡(jiǎn)單來(lái)說(shuō)，高階函數(shù)是一個(gè)接收函數(shù)作為參數(shù)傳遞或者將函數(shù)作為返回值輸出的函數(shù)。

函數(shù)作為參數(shù)傳遞

JavaScript 語(yǔ)言中內(nèi)置了一些高階函數(shù)，比如 Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce，它們接受一個(gè)函數(shù)作為參數(shù)，并應(yīng)用這個(gè)函數(shù)到列表的每一個(gè)元素。我們來(lái)看看使用它們與不使用高階函數(shù)的方案對(duì)比。

Array.prototype.map

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

來(lái)個(gè)簡(jiǎn)單的例子方便理解，現(xiàn)在有一個(gè)數(shù)組 [1, 2, 3, 4]，我們想要生成一個(gè)新數(shù)組，其每個(gè)元素皆是之前數(shù)組的兩倍，那么我們有下面兩種使用高階和不使用高階函數(shù)的方式來(lái)實(shí)現(xiàn)。

不使用高階函數(shù)

// 木易楊
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]

使用高階函數(shù)

// 木易楊
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() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素，原始數(shù)組不會(huì)改變。接收的參數(shù)和 map 是一樣的，其返回值是一個(gè)新數(shù)組、由通過(guò)測(cè)試的所有元素組成，如果沒有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組。

來(lái)個(gè)例子介紹下，現(xiàn)在有一個(gè)數(shù)組 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]，我們想要生成一個(gè)新數(shù)組，這個(gè)數(shù)組要求沒有重復(fù)的內(nèi)容，即為去重。

不使用高階函數(shù)

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]

使用高階函數(shù)

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() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)提供的 reducer 函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。傳遞給 reduce 的回調(diào)函數(shù)（callback）接受四個(gè)參數(shù)，分別是累加器 accumulator、currentValue、currentIndex（可選）、array（可選），除了 callback 之外還可以接受初始值 initialValue 值（可選）。

• 如果沒有提供 initialValue，那么第一次調(diào)用 callback 函數(shù)時(shí)，accumulator 使用原數(shù)組中的第一個(gè)元素，currentValue 即是數(shù)組中的第二個(gè)元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。
• 如果提供了 initialValue，那么將作為第一次調(diào)用 callback 函數(shù)時(shí)的第一個(gè)參數(shù)的值，即 accumulator，currentValue 使用原數(shù)組中的第一個(gè)元素。

來(lái)個(gè)簡(jiǎn)單的例子介紹下，現(xiàn)在有一個(gè)數(shù)組 [0, 1, 2, 3, 4]，需要計(jì)算數(shù)組元素的和，需求比較簡(jiǎn)單，來(lái)看下代碼實(shí)現(xiàn)。

不使用高階函數(shù)

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]

使用高階函數(shù)

無(wú) 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 的情況，代碼的執(zhí)行過(guò)程如下，callback 總共調(diào)用四次。

有 initialValue 值

我們?cè)賮?lái)看下有 initialValue 的情況，假設(shè) 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]

代碼的執(zhí)行過(guò)程如下所示，callback 總共調(diào)用五次。

函數(shù)作為返回值輸出

這個(gè)很好理解，就是返回一個(gè)函數(shù)，下面直接看兩個(gè)例子來(lái)加深理解。

isType 函數(shù)

我們知道在判斷類型的時(shí)候可以通過(guò) Object.prototype.toString.call 來(lái)獲取對(duì)應(yīng)對(duì)象返回的字符串，比如：

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]';

可以發(fā)現(xiàn)上面三行代碼有很多重復(fù)代碼，只需要把具體的類型抽離出來(lái)就可以封裝成一個(gè)判斷類型的方法了，代碼如下。

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

這里就是一個(gè)高階函數(shù)，因?yàn)?isType 函數(shù)將 obj => { ... } 這一函數(shù)作為返回值輸出。

add 函數(shù)

我們看一個(gè)常見的面試題，用 JS 實(shí)現(xiàn)一個(gè)無(wú)限累加的函數(shù) add，示例如下：

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

我們可以看到結(jié)構(gòu)和上面代碼有些類似，都是將函數(shù)作為返回值輸出，然后接收新的參數(shù)并進(jìn)行計(jì)算。

我們知道打印函數(shù)時(shí)會(huì)自動(dòng)調(diào)用 toString()方法，函數(shù) add(a) 返回一個(gè)閉包 sum(b)，函數(shù) sum() 中累加計(jì)算 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; // 返回一個(gè)函數(shù)
}
add(1); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。