一阶函数与高阶函数_高阶函数初学者应该熟悉。

一阶函数与高阶函数

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.

高阶函数是可以通过将其他函数用作参数或返回它们来对其他函数进行操作的函数。

There are a lot more higher order functions than what will be covered in this article, but these are good ones to get you up and running as a beginner. These standard array methods are forEach() , filter() , map() and sort() .

比本文将介绍的功能有很多高级功能,但是这些功能很好,可以让您入门并开始学习。 这些标准数组方法是forEach()filter()map()sort()

  1. forEach( ): This is used when you want to operate on or interact with any element inside of an array. Basically works like the for loop.

    forEach():当您要对数组内的任何元素进行操作或与之交互时使用。 基本上像for循环一样工作。

N.B- I’d be using examples to illustrate each method so you can get a clearer picture, and also just printing to the console to keep the examples as simple and basic as possible.

注意:我将使用示例来说明每种方法,以便您可以获得更清晰的图片,并且只需打印到控制台即可使示例尽可能简单和基本

Example: Lets say in an array of a group or friends, and we want to loop through that array and print to the console each element of that array. Using a for loop ;

示例 :假设在一个由一组或一组朋友组成的数组中,我们想遍历该数组并将每个数组元素打印到控制台。 使用for循环;

const friends = ['Toyin', 'Olumide', 'Fola', 'Tola'];for ( let i=0; i < friends.length ; i++) {
cosole.log (friends[i])
};

The action same as above can be achieved using theforEach() method as seen below;

可以使用如下所示的forEach()方法实现与上述相同的操作;

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];friends.forEach(function(name) {
console.log(name)
};

What the forEach() method simply does is to take in a function as an argument and loop through each item in the array without using iteration[i].

forEach()方法所做的只是将函数作为参数,并在不使用迭代[i]的情况下遍历数组中的每个项目。

This is really awesome when the ES6 arrow functions are used, our code is reduced to a single line that is clean and maintainable. As seen below:

当使用ES6箭头功能时,这真是太棒了,我们的代码被简化为整洁可维护的一行。 如下所示:

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];friends.forEach(name => console.log (name));

2. filter( ) : Just like the name implies, it is used to filter out elements of an array that do not meet the conditions set in the callback function passed as an argument. The callback function passed to the filter() method accepts 3 parameters: element, index, and array , but most times only the element parameter is used.

2. filter():顾名思义,它用于过滤不满足在作为参数传递的回调函数中设置的条件的数组元素。 传递给filter()方法的回调函数接受3个参数: elementindexarray ,但大多数情况下仅使用element参数。

Example : In an array showing a group of friends and their ages, lets say we want to print to the console the friends that can drink assuming the age limit for drinking is 18. Using a for loop without high order functions;

示例:在一个显示一组朋友及其年龄的数组中,假设我们要在控制台上打印可以饮酒的朋友(假设饮酒的年龄限制为18岁)。

const friends = [
{name : 'Toyin', age: 24},
{name : 'Olumide', age: 14},
{name : 'Fola', age: 12},
{name : 'David', age: 42}
];for ( let i=0 ; i<friends.length ; i++) {
if (friends[i].age > 18) {
console.log(`${friends[i].name} can drink`);
}
};

Now using the filter() method :

现在使用filter()方法:

const friends = [
{name : 'Toyin', age: 24},
{name : 'Olumide', age: 14},
{name : 'Fola', age: 12},
{name : 'David', age: 42}
];friends.filter (function (friend) {
if (friend.age > 18){
return true;
}
});

Copy and run the code snippet above on the js console and see that an array containing only friends that can drink is printed. You can now see how filter() works with this example. And again using ES6 arrow functions, this can be re-written as :

js控制台上复制并运行上面的代码段,然后看到打印出仅包含可以喝酒的朋友的数组。 现在,您可以看到filter()如何与此示例一起工作。 再次使用ES6箭头功能,可以将其重写为:

friends.filter( friend => friend.age > 18);

3. map( ) : The map() method creates a new array by calling the callback function provided as an argument on every element in the input array. The map() method will take every returned value from the callback function and create a new array using those values.

3. map(): map()方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建新数组。 map()方法将从回调函数中获取所有返回的值,并使用这些值创建一个新的数组。

The callback function passed to the map() method accepts 3 arguments: element, index, and array.

传递给map()方法的回调函数接受3个参数: elementindexarray

Example: Still using the friends array , lets say we want to double the ages of all friends in the array. We can use the for loop too like I showed previously, but I’m just going to dive right into using the map() method using both ES5 and ES6 functions. N.B -map() method creates a new array unlike filter() that doesn't.

示例:仍在使用 friends数组,可以说我们希望将数组中所有朋友的年龄加倍。 我们也可以像我之前显示的那样使用for循环,但是我将直接使用ES5和ES6函数来使用map()方法。 注意: map()方法创建一个不同于filter()的新数组。

const friends = [
{name : 'Toyin', age: 24},
{name : 'Olumide', age: 14},
{name : 'Fola', age: 12},
{name : 'David', age: 42}
];// using ES5 functions const doublesAge = friends.map(function(friend) {
return friend.age* 2
});
console.log (doublesAge);// using ES6 functions const doublesAges = friends.map( friend => friend.age * 2); console.log(doublesAges);

4. sort ( ) : This method is used to arrange an array in either an ascending or descending order. The callback function passed to the sort() method accepts 2 parameters , which are the elements in the array that is to be compared to each other.

4. sort():此方法用于按升序或降序排列数组。 传递给sort()方法的回调函数接受2个参数,它们是数组中要相互比较的元素。

Example : From our friends array, let say we want to arrange it from the youngest to the oldest friend using the sort() method.

示例:从我们的friends数组中,可以说我们要使用sort()方法将其从最小的朋友排列到最大的朋友。

const friends = [
{name : 'Toyin', age: 24},
{name : 'Olumide', age: 14},
{name : 'Fola', age: 12},
{name : 'David', age: 42}
];//using ES5 functionsconst order1 = friends.sort(function (friend1, friend2){
if (friend1.age > friend2.age){
return 1
} else return -1
});console.log (order1);//using ES6 functionsconst order2 = friends.sort((friend1, friend2) => friend1.age - friend2.age);console.log (order2);

To sort it from the oldest to the youngest, the if condition in the ES6 function will be reversed like friend2.age — friend1.age

要按friend2.age — friend1.age顺序friend2.age — friend1.age ,ES6函数中的if条件将被反转,就像friend2.age — friend1.age

Now I’m sure it is clear how useful this higher order functions can be, even in this very small operation, there is clear evidence how important they are, now imagine how much more relevant they will be in bigger applications.

现在,我敢肯定,即使在非常小的操作中,这种高阶函数也有多么有用,有明确的证据表明它们有多重要,现在想象一下它们在更大的应用程序中将有多重要。

Last but definitely not the least, It is important to know that these methods can be used together and this is what makes it really crucial.

最后但并非最不重要的一点是,很重要的一点是要知道这些方法可以一起使用,这才使其变得至关重要。

I’m going to combine all the examples shown above to create an array of friends a. that can drink,b. arrange them from the eldest to the youngest,c. and print each of them. All at the same time.This is the beauty of higher order functions!. See the code snippet below;

我将结合上面显示的所有示例来创建一个朋友数组。 可以喝的东西,b。 从大到小排列c。 并打印每个。 全部在同一时间。 这就是高阶函数的美! 。 参见下面的代码片段;

const friends = [
{name : 'Toyin', age: 24},
{name : 'Olumide', age: 14},
{name : 'Fola', age: 12},
{name : 'David', age: 42}
];const finalExample = friends
.filter (friend => friend.age > 18)
.sort((friend1, friend2) => friend2.age - friend1.age)
.forEach (friend =>
console.log (`${friend.name} is ${friend.age} years old and allowed to drink`));//this will print
// David is 42 years old and allowed to drink
// Toyin is 24 years old and allowed to drink

Remember to run these codes in your console and see how they implement. I strongly advise you to create your own arrays, set different conditions, tweak things a little bit and apply all these methods. I really hope this article was helpful.

记住要在控制台中运行这些代码,并查看它们如何实现。 我强烈建议您创建自己的数组,设置不同的条件,进行一些微调并应用所有这些方法。 我真的希望这篇文章对您有所帮助。

Practice makes perfect!Happy Coding!

实践使完美!快乐编码!

翻译自: https://medium.com/swlh/higher-order-functions-beginners-should-be-familiar-with-7f56cb8d30dc

一阶函数与高阶函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值