成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 高階函數(shù)快速入門

nanfeiyan / 558人閱讀

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

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

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

把函數(shù)以數(shù)據(jù)的形式去使用，并解鎖一些強大的模式。

高階函數(shù)

接受和/或返回另外一個函數(shù)的函數(shù)被稱為高階函數(shù)。

之所以是高階，是因為它并非字符串、數(shù)字或布爾值，而是從更高層次來操作函數(shù)。漂亮的元。

使用 JavaScript 中的函數(shù)，你可以

將它們存儲為變量

在數(shù)組中使用它們

將它們指定為對象屬性（方法）

將它們作為參數(shù)進行傳遞

將它們從其他函數(shù)中返回

就像所有的其他數(shù)據(jù)一樣。這是關(guān)鍵所在。

函數(shù)操作數(shù)據(jù) 字符串是數(shù)據(jù) 
sayHi = (name) => `Hi, ${name}!`;
result = sayHi("User");
console.log(result); // "Hi, User!"
數(shù)字是數(shù)據(jù) 
double = (x) => x * 2;
result = double(4);
console.log(result); // 8
布爾型是數(shù)據(jù) 
getClearance = (allowed) => allowed ?
  "Access granted" :
  "Access denied";
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // "Access granted"
console.log(result2); // "Access denied"
對象是數(shù)據(jù) 
getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: "Yazeed"
});
console.log(result); // "Yazeed"
數(shù)組是數(shù)據(jù) 
len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3

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

是什么使他們成為一等公民的？你可以傳遞它們，將它們存儲在變量和數(shù)組中，將它們用作計算的輸入。你可以像使用任何數(shù)據(jù)一樣去使用它們。

函數(shù)也可以作為數(shù)據(jù)的形式去用

在javascript中把函數(shù)用作數(shù)據(jù)的4種方式：

把它們當作參數(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 是如何用 isEven 來決定保留哪些數(shù)字的？ isEven是一個函數(shù)，是另一個函數(shù)的參數(shù)。

它由每個數(shù)字的 filter 調(diào)用，并使用返回值 true 或 false 來確定這個數(shù)字是否應(yīng)該保留或丟棄。

返回函數(shù) 
add = (x) => (y) => x + y;

add 需要兩個參數(shù)，但不是一次全部提供。這是一個只需要 x 的函數(shù)，它返回一個只需要y的函數(shù)。因為 JavaScript 允許函數(shù)成為返回值 —— 就像字符串、數(shù)字、布爾值那樣。

如果你愿意，仍然可以立即提供 x 和 y，并進行雙重調(diào)用

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

或者先 x 后 y：

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

讓我們回過頭來看最后一個例子。 add10 是用一個參數(shù)調(diào)用 add 的結(jié)果。并控制臺中輸出它。

add10 是一個函數(shù)，它接受一個 y 并返回 x + y。在你提供 y 之后，它會馬上計算并返回你所要的最終結(jié)果。

更高的可重用性

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

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

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

如果沒有高階函數(shù)，我們需要用循環(huán)來模仿 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

在沒有高階函數(shù)的世界中，我們?nèi)匀恍枰h(huán)來重新實現(xiàn) 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......沒有更高階的功能，實現(xiàn)不了那么多很酷的東西!!

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102580.html

相關(guān)文章

  • JavaScript函數(shù)式編程入門經(jīng)典

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

    silvertheo 評論0 收藏0

  • 架構(gòu)師之路

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

    NikoManiac 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.16 - 淺入淺出 JavaScript 函數(shù)式編程

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

    csRyan 評論0 收藏0

  • 函數(shù)式編程了解一下（上）

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

    int64 評論0 收藏0

  • 封裝Vue組件的一些技巧

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

    韓冰 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<