高階函數：利用Filter、Map和Reduce來編寫更易維護的代碼

前言

今年的最強颱風本周又要來臨了，隔壁省還會被連擊嗎？今日早讀文章由百度外賣@JeLewine翻譯授權分享。

正文從這開始～

高階函數可以幫助你增強你的JavaScript，讓你的代碼更具有聲明性。簡單來說，就是簡單，簡練，可讀。

知道什麼時候和怎樣使用高階函數是至關重要的。它們可以讓你的代碼更容易理解和具有更好的可維護性。它們也可以讓你很輕鬆的進行函數間的組合。我們叫它複合函數，不過我不會在這裡進行詳細的介紹。在本文中，我將介紹JavaScript中三個最常用的高階函數：.filter()，.map()，.reduce()。

Filter

想像一下你正在編寫一段代碼：有一個寫滿不同人信息的列表，不過你想要過濾出一個大於等於18歲人的列表。

我們的列表看起來就像下面這樣：

constpeople=[

{name:『John Doe』,age:16},

{name:『Thomas Calls』,age:19},

{name:『Liam Smith』,age:20},

{name:『Jessy Pinkman』,age:18},

];

我們先來看看第一個高階函數是如何篩選出大於等於18歲人的栗子。為了簡潔，我將使用ES6標準中的箭頭函數。這是一種非常簡潔的定義函數的方式，可以讓我們不必再寫function和return，以及一些括弧、大括弧和分號。

constpeopleAbove18=(collection)=>{

constresults=[];

for(leti=;i

constperson=collection[i];

if(person.age>=18){

results.push(person);

}

}

returnresults;

};

那現在如果我們想要篩選出18~20歲之間的人呢？

constpeopleBetween18And20=(collection)=>{

constresults=[];

for(leti=;i

constperson=collection[i];

if(person.age>=18&&person.age

results.push(person);

}

}

returnresults;

};

你可能已經意識到了這裡有許多重複的代碼。我們可以抽象出一個通用的解決方案。這兩個函數有一些共同點。它們都在一個列表中進行迭代，並且在給定的條件下進行過濾。

"高階函數是一個將一個或多個函數作為參數的函數"——ClojureBridge

我們可以通過使用更具聲明性的.filter()方法來改進我們之前的函數。

constpeopleAbove18=(collection)=>{

returncollection

.filter((person)=>person.age>=18);

}

太棒了!我們通過使用高階函數減少了許多額外的代碼。同時也讓我們的代碼更具可讀性。我們不在乎如何過濾東西，我們只是希望它被過濾。這篇文章稍後會介紹組合函數。

Map

讓我們拿著剛剛的人員名單和一個其中喜歡喝咖啡的人員名單。

constcoffeeLovers=[『John Doe』,『Liam Smith』,『Jessy Pinkman』];

用命令式的實現方式就像下面這樣：

constaddCoffeeLoverValue=(collection)=>{

constresults=[];

for(leti=;i

constperson=collection[i];

if(coffeeLovers.includes(person.name)){

person.coffeeLover=true;

}else{

person.coffeeLover=false;

}

results.push(person);

}

returnresults;

};

我們可以利用.map()來讓代碼更具有聲明性：

constincrementAge=(collection)=>{

returncollection.map((person)=>{

person.coffeeLover=coffeeLovers.includes(person.name);

returnperson;

});

};

再說一遍，.map()是一個高階函數。它允許我們將一個函數作為參數傳遞。

Reduce

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！