JavaScript 高階函數快速入門

nanfeiyan 發布于2019-08-23 15:57 / 552人閱讀

摘要：高階函數接受和或返回另外一個函數的函數被稱為高階函數。之所以是高階，是因為它并非字符串數字或布爾值，而是從更高層次來操作函數。更高的可重用性高階函數的最大好處可能是更高的可重用性。如果沒有高階函數，我們需要用循環來模仿的功能。

翻譯：瘋狂的技術宅
原文：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種方式：

把它們當作參數傳給其它函數

把他們設定成對象屬性

保存在數組中

把它們設為變量的形式

作為參數的函數

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......沒有更高階的功能，實現不了那么多很酷的東西!!

云服務器 GPU云服務器高階函數高階函數應用前端快速入門快速排序函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102580.html

JavaScript函數式編程入門經典

摘要：函數式編程的定義函數是一段可以通過其名稱被調用的代碼。純函數大多數函數式編程的好處來自于編寫純函數，純函數是對給定的輸入返回相同的輸出的函數，并且純函數不應依賴任何外部變量，也不應改變任何外部變量。一個持續更新的github筆記，鏈接地址：Front-End-Basics，可以watch,也可以star。此篇文章的地址：JavaScript函數式編程入門經典正文開始什么是函...

silvertheo 2019-08-23 17:17 評論0 收藏0
架構師之路

摘要：因為用戶不用在第一次進入應用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

NikoManiac 2019-08-22 11:22 評論0 收藏0
SegmentFault 技術周刊 Vol.16 - 淺入淺出 JavaScript 函數式編程

摘要：函數式編程，一看這個詞，簡直就是學院派的典范。所以這期周刊，我們就重點引入的函數式編程，淺入淺出，一窺函數式編程的思想，可能讓你對編程語言的理解更加融會貫通一些。但從根本上來說，函數式編程就是關于如使用通用的可復用函數進行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數式編程（Functional Programming），一...

csRyan 2019-08-22 10:50 評論0 收藏0
函數式編程了解一下（上）

摘要：一直以來沒有對函數式編程有一個全面的學習和使用，或者說沒有一個深刻的思考。是不是輕松了其實函數式編程主張的就是以抽象的方式創建函數。后面咱們在系統性的學習下函數式編程。一直以來沒有對函數式編程有一個全面的學習和使用，或者說沒有一個深刻的思考。最近看到一些博客文章，突然覺得函數式編程還是蠻有意思的。看了些書和文章。這里記載下感悟和收獲。歡迎團隊姜某人多多指點@姜少。由于博客秉持著簡...

int64 2019-08-22 16:21 評論0 收藏0
封裝Vue組件的一些技巧

摘要：根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數據，完成狀態的更新。本文同步在個人博客shymean.com上，歡迎關注寫Vue有很長一段時間了，除了常規的業務開發之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業務代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0