每日前端夜话0x3A
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:3241 字 4 图
预计阅读时间: 7 分钟
翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b
把函数以数据的形式去使用,并解锁一些强大的模式。
接受和/或返回另外一个函数的函数被称为高阶函数。
之所以是高阶,是因为它并非字符串、数字或布尔值,而是从更高层次来操作函数。漂亮的元。
使用 JavaScript 中的函数,你可以
就像所有的其他数据一样。这是关键所在。
1sayHi = (name) => `Hi, ${name}!`;
2result = sayHi('User');
3console.log(result); // 'Hi, User!'
1double = (x) => x * 2;
2result = double(4);
3console.log(result); // 8
1getClearance = (allowed) => allowed ?
2 'Access granted' :
3 'Access denied';
4result1 = getClearance(true);
5result2 = getClearance(false);
6console.log(result1); // 'Access granted'
7console.log(result2); // 'Access denied'
1getFirstName = (obj) => obj.firstName;
2result = getFirstName({
3 firstName: 'Yazeed'
4});
5console.log(result); // 'Yazeed'
1len = (array) => array.length;
2result = len([1, 2, 3]);
3console.log(result); // 3
这5种类型是所有主流语言中的一等公民。
是什么使他们成为一等公民的?你可以传递它们,将它们存储在变量和数组中,将它们用作计算的输入。你可以像使用任何数据一样去使用它们。
在javascript中把函数用作数据的4种方式:
1isEven = (num) => num % 2 === 0;
2result = [1, 2, 3, 4].filter(isEven);
3console.log(result); // [2, 4]
看看 filter
是如何用 isEven
来决定保留哪些数字的? isEven
是一个函数,是另一个函数的参数。
它由每个数字的 filter
调用,并使用返回值 true
或 false
来确定这个数字是否应该保留或丢弃。
1add = (x) => (y) => x + y;
add
需要两个参数,但不是一次全部提供。这是一个只需要 x
的函数,它返回一个只需要y
的函数。因为 JavaScript 允许函数成为返回值 —— 就像字符串、数字、布尔值那样。
如果你愿意,仍然可以立即提供 x
和 y
,并进行双重调用
1result = add(10)(20);
2console.log(result); // 30
或者先 x
后 y
:
1add10 = add(10);
2result = add10(20);
3console.log(result); // 30
让我们回过头来看最后一个例子。 add10
是用一个参数调用 add
的结果。并控制台中输出它。
add10
是一个函数,它接受一个 y
并返回 x + y
。在你提供 y
之后,它会马上计算并返回你所要的最终结果。
高阶函数的最大好处可能是更高的可重用性。没有它,JavaScript 数组的主要方法 —— map
,filter
和 reduce
将不存在!
这是一个用户列表。我们将对他们的信息进行一些计算。
1users = [{
2 name: 'Yazeed',
3 age: 25
4}, {
5 name: 'Sam',
6 age: 30
7}, {
8 name: 'Bill',
9 age: 20
10}];
如果没有高阶函数,我们需要用循环来模仿 map
的功能。
1getName = (user) => user.name;
2usernames = [];
3for (let i = 0; i < users.length; i++) {
4 const name = getName(users[i]);
5 usernames.push(name);
6}
7console.log(usernames);
8// ["Yazeed", "Sam", "Bill"]
或者我们可以这样做!
1usernames = users.map(getName);
2console.log(usernames);
3// ["Yazeed", "Sam", "Bill"]
在没有高阶函数的世界中,我们仍然需要循环来重新实现 filter
的功能。
1startsWithB = (string) => string
2 .toLowerCase()
3 .startsWith('b');
4namesStartingWithB = [];
5for (let i = 0; i < users.length; i++) {
6 if (startsWithB(users[i].name)) {
7 namesStartingWithB.push(users[i]);
8 }
9}
10console.log(namesStartingWithB);
11// [{ "name": "Bill", "age": 20 }]
或者我们可以这样做!
1namesStartingWithB = users
2 .filter((user) => startsWithB(user.name));
3console.log(namesStartingWithB);
4// [{ "name": "Bill", "age": 20 }]
是的,reduce……没有更高阶的功能,实现不了那么多很酷的东西!!?
1total = 0;
2for (let i = 0; i < users.length; i++) {
3 total += users[i].age;
4}
5console.log(total);
6// 75
这个怎么样?
1totalAge = users
2 .reduce((total, user) => user.age + total, 0);
3console.log(totalAge);
4// 75