JavaScript 高階函式快速入門

前端先鋒發表於2019-03-20
JavaScript函式

翻譯：瘋狂的技術宅

原文：medium.freecodecamp.org/a-quick-int…

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

img

高階函式

接受和/或返回另外一個函式的函式被稱為高階函式。

之所以是高階，是因為它並非字串、數字或布林值，而是從更高層次來操作函式。漂亮的元。

使用 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種型別是所有主流語言中的一等公民。

是什麼使他們成為一等公民的？你可以傳遞它們，將它們儲存在變數和陣列中，將它們用作計算的輸入。你可以像使用任何資料一樣去使用它們。

函式也可以作為資料的形式去用

img

在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 的結果。並控制檯中輸出它。

img

add10 是一個函式，它接受一個 y 並返回 x + y。在你提供 y 之後，它會馬上計算並返回你所要的最終結果。

img

更高的可重用性

高階函式的最大好處可能是更高的可重用性。沒有它，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 是典型的例子 —— 並且使變換、搜尋和列表求和等常見模式更加容易！

歡迎關注京程一燈公眾號：京程一燈，獲取更多前端乾貨。

相關文章