原文：https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/

譯者：jingruzhang

校對者：acusp

高階函數(shù)

高階函數(shù)可以接收函數(shù)作為參數(shù)，同時也可以返回一個新的函數(shù)。

高階函數(shù)之所以高階，是因為高階函數(shù)的參數(shù)和返回值對象可以是函數(shù)，這超越了普通函數(shù)處理的數(shù)據類型，例如字符串(strings)、數(shù)字(numbers)、布爾值(booleans)等。

JavaScript 中，函數(shù)的應用場景很豐富：

• 作為變量存儲

• 在數(shù)組中使用

• 作為對象屬性(即方法)

• 作為參數(shù)傳遞

• 作為其他函數(shù)的返回值

理解高階函數(shù)的關鍵在于，函數(shù)即數(shù)據。

數(shù)據是函數(shù)運作的基本

數(shù)據：字符串(Strings)

sayHi?=?(name)?=>?`Hi,?${name}!`;
result?=?sayHi('User');

console.log(result);?//?'Hi,?User!'

數(shù)據：數(shù)字(Numbers)

double?=?(x)?=>?x?*?2;
result?=?double(4);

console.log(result);?//?8

數(shù)據：布爾值(Booleans)

getClearance?=?(allowed)?=>?allowed????'Access?granted'?:??'Access?denied';

result1?=?getClearance(true);
result2?=?getClearance(false);

console.log(result1);?//?'Access?granted'
console.log(result2);?//?'Access?denied'

數(shù)據：對象(Objects)

getFirstName?=?(obj)?=>?obj.firstName;

result?=?getFirstName({??
????firstName:?'Yazeed'
});

console.log(result);?//?'Yazeed'

數(shù)據：數(shù)組(Arrays)

len?=?(array)?=>?array.length;
result?=?len([1,?2,?3]);

console.log(result);?//?3

在所有的主流語言中，以上這五種數(shù)據類型被稱為 “頭等對象”(原文：first-class citizen, https://www.wikiwand.com/en/First-class_citizen)。

為什么是“頭等”呢？因為這五種數(shù)據類型既可以作為參數(shù)傳遞，又可以存儲在變量或者數(shù)組中，還可以作為變量用于計算，是數(shù)據的基本形式。

函數(shù)也是數(shù)據

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

isEven?=?(num)?=>?num?%?2?===?0;
result?=?[1,?2,?3,?4].filter(isEven);

console.log(result);?//?[2,?4]

請觀察 filter 函數(shù)是如何使用 isEven 函數(shù)來判斷要保留哪些內容的。這里的 isEven 是一個函數(shù)，作為參數(shù)傳入了 filter 函數(shù)中。

filter 函數(shù)每次在做判斷的時候都會調用 isEven 函數(shù)，用 isEven 函數(shù)返回的布爾值來決定當前數(shù)值的去留。

函數(shù)作為返回值

add?=?(x)?=>?(y)?=>?x?+?y;

add 函數(shù)需要兩個參數(shù)，但不需要它們倆同時傳入，第一次傳參傳入 x 就會返還一個新函數(shù)，這個函數(shù)需要傳入 y 參數(shù)。

能夠這樣操作的基礎在于 JavaScript 語言允許函數(shù)本身作為返回值存在，就像函數(shù)可以返回字符串(strings)、數(shù)字(numbers)、布爾值(booleans)等，JS 函數(shù)還可以返回另一個函數(shù)。

當然，我們也可以使用“雙重調用”的方式，一次性提供 x 和 y 兩個參數(shù)：

result?=?add(10)(20);

console.log(result);?//?30

或者分兩次調用，先傳參數(shù) x，再傳參數(shù) y：

add10?=?add(10);
result?=?add10(20);

console.log(result);?//?30

在上面這個例子中， add10 函數(shù)是第一次調用 add 函數(shù)的返回值，可以嘗試用 console.log 把結果打出來觀察一下。

add10 函數(shù)會接收 y 參數(shù)，然后返回 x + y 值。一旦 y 值到位，函數(shù)會立馬進行運算并返回結果。

可重復利用性

高階函數(shù)的魅力在于它的可重復利用性，如果不是高階函數(shù)，map、filter、reduce 等強大的數(shù)組函數(shù)就不可能存在。

假設我們有一組用戶，如下所示，然后我們要對該數(shù)組進行操作。

users?=?[
??{
????name:?'Yazeed',
????age:?25
??},
??{
????name:?'Sam',
????age:?30
??},
??{
????name:?'Bill',
????age:?20
??}
];

Map

沒有高階函數(shù)的話，我們必須回到 for 循環(huán)的懷抱才能實現(xiàn) map 函數(shù)的操作。

getName?=?(user)?=>?user.name;
usernames?=?[];

for?(let?i?=?0;?i???const?name?=?getName(users[i]);

??usernames.push(name);
}

console.log(usernames);
//?["Yazeed",?"Sam",?"Bill"]

用 map 函數(shù)就簡單多啦！

usernames?=?users.map(getName);

console.log(usernames);
//?["Yazeed",?"Sam",?"Bill"]

Filter

在沒有高階函數(shù)的情況下，必須要用 for 循環(huán)來實現(xiàn) filter 函數(shù)的功能。

startsWithB?=?(string)?=>?string.toLowerCase().startsWith('b');

namesStartingWithB?=?[];

for?(let?i?=?0;?i???if?(startsWithB(users[i].name))?{
????namesStartingWithB.push(users[i]);
??}
}

console.log(namesStartingWithB);
//?[{?"name":?"Bill",?"age":?20?}]

用 filter 函數(shù)就簡單多啦！

namesStartingWithB?=?users.filter((user)?=>?startsWithB(user.name));

console.log(namesStartingWithB);
//?[{?"name":?"Bill",?"age":?20?}]

Reduce

reduce 函數(shù)也是的……沒有高階函數(shù)的話，很多高端操作都是無法實現(xiàn)的！

total?=?0;

for?(let?i?=?0;?i???total?+=?users[i].age;
}

console.log(total);
//?75

那這樣是不是簡單多啦？

totalAge?=?users.reduce((total,?user)?=>?user.age?+?total,?0);

console.log(totalAge);
//?75

總結

• 字符串(strings)、數(shù)字(numbers)、布爾值(booleans)、數(shù)組(arrays)、對象(objects)可以作為變量(variables)、數(shù)組(arrays)、屬性( properties)或者方法(methods)存儲起來。

• JavaScript 語言中，函數(shù)也是像數(shù)據一樣同等對待的。

• 因此函數(shù)可以作為另外一個函數(shù)的參數(shù)或者返回值使用，這樣的做法叫高階函數(shù)。

• map、filter、 reduce 等函數(shù)就是高階函數(shù)的最佳代表，它們讓數(shù)組的處理(改變，搜索，相加等)變得簡單不少！

總結

以上是生活随笔為你收集整理的函数传参string_JavaScript 高阶函数入门浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。