by Guido Schmitz

由Guido Schmitz

Higher order functions can help you to step up your JavaScript game by making your code more declarative. That is, short, simple, and readable.

高阶函数可以通过使代码更具声明性来帮助您增强JavaScript游戏。 即，简短，简单且可读。

A Higher Order Function is any function that returns a function when executed, takes a function as one or more of its arguments, or both. If you have used any of the Array methods like map or filter, or passed a callback function to jQuery’s $.get, you have already worked with Higher Order Functions.

高阶函数是在执行时返回函数，将一个函数用作其一个或多个参数或两者兼有的任何函数。 如果您使用了诸如map或filter任何Array方法，或者将回调函数传递给jQuery的$.get ，那么您已经使用了高阶函数。

When you use Array.map, you provide a function as its only argument, which it applies to every element contained in the array.

当您使用Array.map ，您将提供一个函数作为其唯一参数，该函数适用于数组中包含的每个元素。

var arr = [ 1, 2, 3 ];var arrDoubled = arr.map(function(num) {return num * 2;
});console.log(arrDoubled); // [ 2, 4, 6 ]

Higher order functions can also return a function. For example, you can make a function called multiplyBy that takes a number and returns a function that multiplies another number you provide by the first number provided. You can use this approach to create a multiplyByTwo function to pass to Array.map. This will give you the same result you saw above.

高阶函数也可以返回一个函数。 例如，您可以使一个名为multiplyBy的函数接受一个数字，然后返回一个函数，该函数将您提供的另一个数字乘以提供的第一个数字。 您可以使用此方法来创建一个multiplyByTwo功能传递给Array.map 。 这将为您提供与上述相同的结果。

function multiplyBy(num1) {return function(num2) {return num1 * num2;}
}var multiplyByTwo = multiplyBy(2);var arr = [ 1, 2, 3 ];var arrDoubled = arr.map(multiplyByTwo);console.log(arrDoubled); // [ 2, 4, 6 ]

Knowing when and how to use these functions is essential. They make your code easier to understand and maintain. It also makes it easy to combine functions with each other. This is called composition, and I will not go in much detail here. In this article I will cover the three most used higher order functions in JavaScript. These are .filter(), .map() and .reduce().

了解何时以及如何使用这些功能至关重要。 它们使您的代码更易于理解和维护。 它还使相互组合功能变得容易。 这称为合成，在此不再赘述。 在本文中，我将介绍JavaScript中三个最常用的高阶函数。 这些都是.filter() .map()和.reduce()

过滤 (Filter)

Imagine writing a piece of code that accepts a list of people where you want to filter out the people that are equal or above the age of 18.

想象一下，编写一段代码来接受要过滤掉年龄等于或大于18岁的人员的人员列表。

Our list looks like the one below:

我们的列表如下所示：

const people = [ { name: ‘John Doe’, age: 16 }, { name: ‘Thomas Calls’, age: 19 }, { name: ‘Liam Smith’, age: 20 }, { name: ‘Jessy Pinkman’, age: 18 },];

Let’s look at an example of a first order function which select people that are above the age of 18. I’m using an arrow function that is part of the ECMAScript standard or ES6 for short. It’s just a shorter way of defining a function and allows you to skip typing function and return, as well as some parentheses, braces, and a semicolon.

让我们看一下选择18岁以上人群的一阶函数的示例。我使用的箭头函数是ECMAScript标准或ES6的一部分。 这只是定义函数的一种较短方法，它允许您跳过键入函数并返回，以及一些括号，花括号和分号。

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

Now what if we want to select all the people who are between 18 and 20? We could create another function.

现在，如果我们要选择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;};

You may already recognize a lot of repeating code here. This could be abstracted into a more generalized solution. These two functions have something in common. They both iterate over a list and filter it on a given condition.

您可能已经在这里认识到很多重复的代码。 这可以抽象为更通用的解决方案。 这两个功能有一些共同点。 它们都遍历列表，并在给定条件下对其进行过滤。

“A higher order function is a function that takes one or more functions as arguments.”— Closurebridge

“高阶函数是将一个或多个函数作为参数的函数。” — Closurebridge

We can improve our previous function by using a more declarative approach, .filter().

我们可以使用更具声明性的方法.filter()来改进先前的功能。

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

That’s it! We can reduce a lot of extra code by using this higher order function. It also make our code better to read. We don’t care how things are being filtered, we just want it to filter. I will go into combining functions later in this article.

而已！ 通过使用此高阶函数，我们可以减少很多额外的代码。 这也使我们的代码更易于阅读。 我们不在乎如何过滤事物，我们只希望它进行过滤。 我将在本文的后面部分介绍合并功能。

地图 (Map)

Let’s take the same list of people and an array of names that tells if the person loves to drink coffee.

让我们以相同的人员列表和一组名称来说明该人员是否喜欢喝咖啡。

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

The imperative way will be like:

命令式如下：

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

We could use .map() to make this more declarative.

我们可以使用.map()使其更具说明性。

const incrementAge = (collection) => {  return collection.map((person) => {    person.coffeeLover = coffeeLovers.includes(person.name);     return person;  });};

Again, .map() is a high-order function. It allows a function to be passed as an argument.

同样， .map()是一个高阶函数。 它允许将函数作为参数传递。

减少 (Reduce)

I bet you will like this function when you know when and how to use it.The cool thing about .reduce() is that most of the functions above can be made with it.

我敢打赌，当您知道何时以及如何使用它时，您将喜欢此函数.reduce()在于，上面的大多数函数都可以使用它来完成。

Let’s take a simple example first. We want to sum up all the people’s ages. Again, we’ll look how this can be done using the imperative approach. It’s basically looping through the collection and increment a variable with the age.

首先让我们举一个简单的例子。 我们要总结全体人民的年龄。 再次，我们将探讨如何使用命令式方法来完成此任务。 它基本上是遍历整个集合，并随年龄增长一个变量。

const sumAge = (collection) => {  let num = 0;   collection.forEach((person) => {    num += person.age;  });   return num;}

And the declarative approach using .reduce().

以及使用.reduce()的声明方法。

const sumAge = (collection) => collection.reduce((sum, person) => { return sum + person.age;}, 0);

We can even use .reduce() to create our own implementation of .map() and .filter() .

我们甚至可以使用.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;  }, []);}

This might be hard to understand at first. But what .reduce() basically does is start with a collection and a variable with an initial value. You then iterate over the collection and append (or add) the values to the variable.

起初这可能很难理解。 但是.reduce()基本上是从一个集合和一个带有初始值的变量开始的。 然后，您遍历集合并将值附加(或添加)到变量。

结合地图，过滤和缩小 (Combining map, filter and reduce)

Great, that these functions exist. But the good part is that they exist on the Array prototype in JavaScript. This means these functions can be used together! This makes it easy to create reusable functions and reduce the amount of code that is required to write certain functionality.

太好了，这些功能存在。 但是好消息是它们存在于JavaScript的Array原型中。 这意味着这些功能可以一起使用！ 这样可以轻松创建可重用的功能，并减少编写某些功能所需的代码量。

So we talked about using .filter() to filter out the people that are equal or below the age of 18. .map() to add the coffeeLover property, and .reduce() to finally create a sum of the age of everyone combined.Lets write some code that actually combines these three steps.

因此，我们讨论了使用.filter()过滤掉等于或小于18岁的用户coffeeLover .map()添加了coffeeLover属性，而coffeeLover .reduce()最终创建了每个人的总和让我们编写一些实际上结合了这三个步骤的代码。

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

If you do it the imperative way, you will end up writing a lot of repeating code.

如果以命令方式执行此操作，则最终将编写大量重复的代码。

The mindset of creating functions with .map() ,.reduce() and .filter() will improve the quality of the code you’ll write. But it also adds a lot of readability. You don’t have to think about what’s going on inside a function. It’s easy to understand.

创建的功能与心态.map() .reduce()和.filter()将提高你写的代码的质量。 但这也增加了很多可读性。 您不必考虑函数内部发生了什么。 很容易理解。

Thanks for reading! :)

谢谢阅读！ :)

Say hello on Twitter

在Twitter上问好

翻译自: https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/