JavaScript 高階函數快速入門

翻譯：瘋狂的技術宅
原文： https://medium.freecodecamp.o...

---

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章

---

把函數以數據的形式去使用，並解鎖一些強大的模式。

高階函數

接受和/或返回另一個函數的函數被稱爲高階函數。

之因此是高階，是由於它並不是字符串、數字或布爾值，而是從更高層次來操做函數。漂亮的元。

使用 JavaScript 中的函數，你能夠

• 將它們存儲爲變量
• 在數組中使用它們
• 將它們指定爲對象屬性（方法）
• 將它們做爲參數進行傳遞
• 將它們從其餘函數中返回

就像全部的其餘數據同樣。這是關鍵所在。

函數操做數據

字符串是數據

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

數字是數據

double = (x) => x * 2;
result = double(4);
console.log(result); // 8

布爾型是數據

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

對象是數據

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'

數組是數據

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

這5種類型是全部主流語言中的一等公民。

是什麼使他們成爲一等公民的？你能夠傳遞它們，將它們存儲在變量和數組中，將它們用做計算的輸入。你能夠像使用任何數據同樣去使用它們。

函數也能夠做爲數據的形式去用

在javascript中把函數用做數據的4種方式：

1. 把它們看成參數傳給其它函數
2. 把他們設定成對象屬性
3. 保存在數組中
4. 把它們設爲變量的形式

做爲參數的函數

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

看看 filter 是如何用 isEven 來決定保留哪些數字的？ isEven是一個函數，是另外一個函數的參數。

它由每一個數字的 filter 調用，並使用返回值 true 或 false 來肯定這個數字是否應該保留或丟棄。

返回函數

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

add 須要兩個參數，但不是一次所有提供。這是一個只須要 x 的函數，它返回一個只須要y的函數。由於 JavaScript 容許函數成爲返回值 —— 就像字符串、數字、布爾值那樣。

若是你願意，仍然能夠當即提供 x 和 y，並進行雙重調用

result = add(10)(20);
console.log(result); // 30

或者先 x 後 y：

add10 = add(10);
result = add10(20);
console.log(result); // 30

讓咱們回過頭來看最後一個例子。 add10 是用一個參數調用 add 的結果。並控制檯中輸出它。

add10 是一個函數，它接受一個 y 並返回 x + y。在你提供 y 以後，它會立刻計算並返回你所要的最終結果。

更高的可重用性

高階函數的最大好處多是更高的可重用性。沒有它，JavaScript 數組的主要方法 —— map，filter 和 reduce 將不存在！

這是一個用戶列表。咱們將對他們的信息進行一些計算。

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

Map

若是沒有高階函數，咱們須要用循環來模仿 map 的功能。

getName = (user) => user.name;
usernames = [];
for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);
  usernames.push(name);
}
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

或者咱們能夠這樣作！

usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在沒有高階函數的世界中，咱們仍然須要循環來從新實現 filter 的功能。

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

或者咱們能夠這樣作！

namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

是的，reduce......沒有更高階的功能，實現不了那麼多很酷的東西!!😁

total = 0;
for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}
console.log(total);
// 75

這個怎麼樣？

totalAge = users
  .reduce((total, user) => user.age + total, 0);
console.log(totalAge);
// 75

總結

• 字符串、數字、bool、數組和對象能夠存儲爲變量，數組和屬性或方法。
• JavaScript 以相同的方式處理函數。
• 這容許在其餘函數上運行另一個函數：高階函數。

• Map、filter 和 reduce 是典型的例子 —— 而且使變換、搜索和列表求和等常見模式更加容易！

---

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 世界頂級公司的前端面試都問些什麼
• CSS Flexbox 可視化手冊
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• 從設計者的角度看 React
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 7個開放式的前端面試題
• React 教程：快速上手指南