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

jone5679 發布于2019-08-20 19:01 / 3145人閱讀

摘要：原文作者譯者高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。太棒了我們通過使用高階函數減少了許多額外的代碼。

原文：Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code
作者：Guido Schmitz
譯者：JeLewine

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

知道什么時候和怎樣使用高階函數是至關重要的。它們可以讓你的代碼更容易理解和具有更好的可維護性。它們也可以讓你很輕松的進行函數間的組合。我們叫它復合函數，不過我不會在這里進行詳細的介紹。在本文中，我將介紹JavaScript中三個最常用的高階函數：.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 },
];

我們先來看看第一個高階函數是如何篩選出大于等于18歲人的栗子。為了簡潔，我將使用ES6標準中的箭頭函數。這是一種非常簡潔的定義函數的方式，可以讓我們不必再寫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;
};

那現在如果我們想要篩選出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;
};

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

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

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

const peopleAbove18 = (collection) => {
  return collection
    .filter((person) => person.age >= 18);
}

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

Map

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

const coffeeLovers = [‘John Doe’, ‘Liam Smith’, ‘Jessy Pinkman’];

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

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()是一個高階函數。它允許我們將一個函數作為參數傳遞。

Reduce

我敢打賭，當你知道什么時候和怎樣使用它的時候，你會喜歡上這個函數。.reduce()很酷，上面提到的的大部分函數都可以通過它來實現。

讓我們先舉一個簡單的栗子。我們想計算所有人年齡的和。當然了，我們還是會首先看看如何用命令式的方式實現。它基本上就是通過循環來增加總年齡變量。

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()來創建我們自己的.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

太好了，這些函數我們都有了。而且很重要的一點是，他們都存在于JavaScript的數組原型上。這意味著我們可以同時使用它們。這可以讓我們輕松創建各種可復用的函數，減少編寫某些功能所需要的代碼量。

我們已經討論過了如何利用.filter()來過濾出大于等于18歲的人；利用.map()來添加coffeeLover屬性；通過.reduce()來計算所有人年齡的和?，F在，我們寫一點代碼將這三個步驟合并起來。

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);

如果你用命令式方法的話，你最后會寫一堆重復代碼。

通過.map()，.reduce()和.filter()來創建函數的思維將會極大的提高你的代碼質量。而且可以增加可讀性。你根本不必在意函數內到底發生了什么，它非常容易理解。

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

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

2017-08-28 前端日報

摘要：前端日報精選譯高階函數利用和來編寫更易維護的代碼，從入門到放棄響應式編程入門行的電梯調度模擬器個人分享前端學習資源分享中文周刊技術周刊期知乎專欄中的內置方法知乎專欄中的柯里化前端大寶劍小結常見知識依賴收集掘金項目主域重 2017-08-28 前端日報精選【譯】高階函數：利用Filter、Map和Reduce來編寫更易維護的代碼Webpack 3，從入門到放棄響應式編程入門：50 行...

xumenger 2019-08-20 18:59 評論0 收藏0
【譯】JavaScript 中的函數式編程原理

摘要：在這篇文章中，我將通過中的大量代碼示例向您詳細介紹函數式編程和一些重要概念。注意在函數式編程中不鼓勵可變性。純函數是穩定，一致并且可預測的。原文：Functional Programming Principles in Javascript作者：TK譯者：博軒經過很長一段時間的學習和面向對象編程的工作，我退后一步，開始思考系統的復雜性。復雜性是任何使軟件難以理解或修改的東西。 -...

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

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

NikoManiac 2019-08-22 11:22 評論0 收藏0
JavaScript 編程精解中文第三版五、高階函數

摘要：高階函數如果一個函數操作其他函數，即將其他函數作為參數或將函數作為返回值，那么我們可以將其稱為高階函數。我們可以使用高階函數對一系列操作和值進行抽象。高階函數有多種表現形式。腳本數據集數據處理是高階函數表現突出的一個領域。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Higher-Order Functions 譯者：飛龍協議：CC BY-NC-...

blastz 2019-08-23 18:19 評論0 收藏0
一文帶你了解什么是JavaScript 函數式編程？

摘要：前言函數式編程在前端已經成為了一個非常熱門的話題。整個過程就是體現了函數式編程的核心思想通過函數對數據進行轉換。高階函數函數式編程傾向于復用一組通用的函數功能來處理數據，它通過使用高階函數來實現。前言函數式編程在前端已經成為了一個非常熱門的話題。在最近幾年里，我們看到非常多的應用程序代碼庫里大量使用著函數式編程思想。本文將略去那些晦澀難懂的概念介紹，重點展示在 JavaScrip...

acrazing 2019-08-26 10:40 評論0 收藏0