摘要:原文作者譯者高階函數(shù)可以幫助你增強(qiáng)你的,讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。太棒了我們通過使用高階函數(shù)減少了許多額外的代碼。
原文:Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code
作者:Guido Schmitz
譯者:JeLewine
高階函數(shù)可以幫助你增強(qiáng)你的JavaScript,讓你的代碼更具有聲明性。簡單來說,就是簡單,簡練,可讀。
知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。它們可以讓你的代碼更容易理解和具有更好的可維護(hù)性。它們也可以讓你很輕松的進(jìn)行函數(shù)間的組合。我們叫它復(fù)合函數(shù),不過我不會在這里進(jìn)行詳細(xì)的介紹。在本文中,我將介紹JavaScript中三個最常用的高階函數(shù):.filter(),.map(),.reduce。
Filter想象一下你正在編寫一段代碼:有一個寫滿不同人信息的列表,不過你想要過濾出一個大于等于18歲人的列表。
我們的列表看起來就像下面這樣:
const people = [ { name: ‘John Doe’, age: 16 }, { name: ‘Thomas Calls’, age: 19 }, { name: ‘Liam Smith’, age: 20 }, { name: ‘Jessy Pinkman’, age: 18 }, ];
我們先來看看第一個高階函數(shù)是如何篩選出大于等于18歲人的栗子。為了簡潔,我將使用ES6標(biāo)準(zhǔn)中的箭頭函數(shù)。這是一種非常簡潔的定義函數(shù)的方式,可以讓我們不必再寫function和return,以及一些括號、大括號和分號。
const peopleAbove18 = (collection) => { const results = []; for (let i = 0; i < collection.length; i++) { const person = collection[i]; if (person.age >= 18) { results.push(person); } } return results; };
那現(xiàn)在如果我們想要篩選出18~20歲之間的人呢?
const peopleBetween18And20 = (collection) => { const results = []; for (let i = 0; i < collection.length; i++) { const person = collection[i]; if (person.age >= 18 && person.age <= 20) { results.push(person); } } return results; };
你可能已經(jīng)意識到了這里有許多重復(fù)的代碼。我們可以抽象出一個通用的解決方案。這兩個函數(shù)有一些共同點。它們都在一個列表中進(jìn)行迭代,并且在給定的條件下進(jìn)行過濾。
"高階函數(shù)是一個將一個或多個函數(shù)作為參數(shù)的函數(shù)"——ClojureBridge
我們可以通過使用更具聲明性的.filter()方法來改進(jìn)我們之前的函數(shù)。
const peopleAbove18 = (collection) => { return collection .filter((person) => person.age >= 18); }
太棒了!我們通過使用高階函數(shù)減少了許多額外的代碼。同時也讓我們的代碼更具可讀性。我們不在乎如何過濾東西,我們只是希望它被過濾。這篇文章稍后會介紹組合函數(shù)。
Map讓我們拿著剛剛的人員名單和一個其中喜歡喝咖啡的人員名單。
const coffeeLovers = [‘John Doe’, ‘Liam Smith’, ‘Jessy Pinkman’];
用命令式的實現(xiàn)方式就像下面這樣:
const addCoffeeLoverValue = (collection) => { const results = []; for (let i = 0; i < collection.length; i++) { const person = collection[i]; if (coffeeLovers.includes(person.name)) { person.coffeeLover = true; } else { person.coffeeLover = false; } results.push(person); } return results; };
我們可以利用.map()來讓代碼更具有聲明性:
const incrementAge = (collection) => { return collection.map((person) => { person.coffeeLover = coffeeLovers.includes(person.name); return person; }); };
再說一遍,.map()是一個高階函數(shù)。它允許我們將一個函數(shù)作為參數(shù)傳遞。
Reduce我敢打賭,當(dāng)你知道什么時候和怎樣使用它的時候,你會喜歡上這個函數(shù)。.reduce()很酷,上面提到的的大部分函數(shù)都可以通過它來實現(xiàn)。
讓我們先舉一個簡單的栗子。我們想計算所有人年齡的和。當(dāng)然了,我們還是會首先看看如何用命令式的方式實現(xiàn)。它基本上就是通過循環(huán)來增加總年齡變量。
const sumAge = (collection) => { let num = 0; collection.forEach((person) => { num += person.age; }); return num; }
接下來是使用.reduce()的聲明式方法:
const sumAge = (collection) => collection.reduce((sum, person) => { return sum + person.age; }, 0);
我們甚至可以使用.reduce()來創(chuàng)建我們自己的.map()和.filter()。
const map = (collection, fn) => { return collection.reduce((acc, item) => { return acc.concat(fn(item)); }, []); } const filter = (collection, fn) => { return collection.reduce((acc, item) => { if (fn(item)) { return acc.concat(item); } return acc; }, []); }
一開始這一塊兒可能比較難理解。不過,.reduce()做的基本上就是以一個集合和一個定義了初始值的變量開始。然后,遍歷該集合并將值添加到變量中去。
組合map,filter和reduce太好了,這些函數(shù)我們都有了。而且很重要的一點是,他們都存在于JavaScript的數(shù)組原型上。這意味著我們可以同時使用它們。這可以讓我們輕松創(chuàng)建各種可復(fù)用的函數(shù),減少編寫某些功能所需要的代碼量。
我們已經(jīng)討論過了如何利用.filter()來過濾出大于等于18歲的人;利用.map()來添加coffeeLover屬性;通過.reduce()來計算所有人年齡的和。現(xiàn)在,我們寫一點代碼將這三個步驟合并起來。
const people = [ { name: ‘John Doe’, age: 16 }, { name: ‘Thomas Calls’, age: 19 }, { name: ‘Liam Smith’, age: 20 }, { name: ‘Jessy Pinkman’, age: 18 }, ]; const coffeeLovers = [‘John Doe’, ‘Liam Smith’, ‘Jessy Pinkman’]; const ageAbove18 = (person) => person.age >= 18; const addCoffeeLoverProperty = (person) => { person.coffeeLover = coffeeLovers.includes(person.name); return person; } const ageReducer = (sum, person) => { return sum + person.age; }, 0); const coffeeLoversAbove18 = people .filter(ageAbove18) .map(addCoffeeLoverProperty); const totalAgeOfCoffeeLoversAbove18 = coffeeLoversAbove18 .reduce(ageReducer); const totalAge = people .reduce(ageReducer);
如果你用命令式方法的話,你最后會寫一堆重復(fù)代碼。
通過.map(),.reduce()和.filter()來創(chuàng)建函數(shù)的思維將會極大的提高你的代碼質(zhì)量。而且可以增加可讀性。你根本不必在意函數(shù)內(nèi)到底發(fā)生了什么,它非常容易理解。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/85036.html
摘要:前端日報精選譯高階函數(shù)利用和來編寫更易維護(hù)的代碼,從入門到放棄響應(yīng)式編程入門行的電梯調(diào)度模擬器個人分享前端學(xué)習(xí)資源分享中文周刊技術(shù)周刊期知乎專欄中的內(nèi)置方法知乎專欄中的柯里化前端大寶劍小結(jié)常見知識依賴收集掘金項目主域重 2017-08-28 前端日報 精選 【譯】高階函數(shù):利用Filter、Map和Reduce來編寫更易維護(hù)的代碼Webpack 3,從入門到放棄響應(yīng)式編程入門:50 行...
摘要:在這篇文章中,我將通過中的大量代碼示例向您詳細(xì)介紹函數(shù)式編程和一些重要概念。注意在函數(shù)式編程中不鼓勵可變性。純函數(shù)是穩(wěn)定,一致并且可預(yù)測的。 原文:Functional Programming Principles in Javascript作者:TK譯者:博軒 經(jīng)過很長一段時間的學(xué)習(xí)和面向?qū)ο缶幊痰墓ぷ鳎彝撕笠徊剑_始思考系統(tǒng)的復(fù)雜性。 復(fù)雜性是任何使軟件難以理解或修改的東西。 -...
摘要:因為用戶不用在第一次進(jìn)入應(yīng)用時下載所有代碼,用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的,讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要:高階函數(shù)如果一個函數(shù)操作其他函數(shù),即將其他函數(shù)作為參數(shù)或?qū)⒑瘮?shù)作為返回值,那么我們可以將其稱為高階函數(shù)。我們可以使用高階函數(shù)對一系列操作和值進(jìn)行抽象。高階函數(shù)有多種表現(xiàn)形式。腳本數(shù)據(jù)集數(shù)據(jù)處理是高階函數(shù)表現(xiàn)突出的一個領(lǐng)域。 來源:ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文:Higher-Order Functions 譯者:飛龍 協(xié)議:CC BY-NC-...
摘要:前言函數(shù)式編程在前端已經(jīng)成為了一個非常熱門的話題。整個過程就是體現(xiàn)了函數(shù)式編程的核心思想通過函數(shù)對數(shù)據(jù)進(jìn)行轉(zhuǎn)換。高階函數(shù)函數(shù)式編程傾向于復(fù)用一組通用的函數(shù)功能來處理數(shù)據(jù),它通過使用高階函數(shù)來實現(xiàn)。 前言 函數(shù)式編程在前端已經(jīng)成為了一個非常熱門的話題。在最近幾年里,我們看到非常多的應(yīng)用程序代碼庫里大量使用著函數(shù)式編程思想。 本文將略去那些晦澀難懂的概念介紹,重點展示在 JavaScrip...
閱讀 1906·2021-11-22 14:44
閱讀 1672·2021-11-02 14:46
閱讀 3657·2021-10-13 09:40
閱讀 2601·2021-09-07 09:58
閱讀 1586·2021-09-03 10:28
閱讀 1658·2019-08-29 15:30
閱讀 976·2019-08-29 15:28
閱讀 1469·2019-08-26 12:20