翻译:疯狂的技术宅
原文: https://medium.freecodecamp.o...
本文首发微信公众号:jingchengyideng
欢迎关注,天天都给你推送新鲜的前端技术文章javascript
把函数以数据的形式去使用,并解锁一些强大的模式。前端
接受和/或返回另一个函数的函数被称为高阶函数。java
之因此是高阶,是由于它并不是字符串、数字或布尔值,而是从更高层次来操做函数。漂亮的元。程序员
使用 JavaScript 中的函数,你能够面试
就像全部的其余数据同样。这是关键所在。json
sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!'
double = (x) => x * 2; result = double(4); console.log(result); // 8
getClearance = (allowed) => allowed ? 'Access granted' : 'Access denied'; result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied'
getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed'
len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3
这5种类型是全部主流语言中的一等公民。segmentfault
是什么使他们成为一等公民的?你能够传递它们,将它们存储在变量和数组中,将它们用做计算的输入。你能够像使用任何数据同样去使用它们。数组
在javascript中把函数用做数据的4种方式:微信
isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4]
看看 filter
是如何用 isEven
来决定保留哪些数字的? isEven
是一个函数,是另外一个函数的参数。ide
它由每一个数字的 filter
调用,并使用返回值 true
或 false
来肯定这个数字是否应该保留或丢弃。
add = (x) => (y) => x + y;
add
须要两个参数,但不是一次所有提供。这是一个只须要 x
的函数,它返回一个只须要y
的函数。由于 JavaScript 容许函数成为返回值 —— 就像字符串、数字、布尔值那样。
若是你愿意,仍然能够当即提供 x
和 y
,并进行双重调用
result = add(10)(20); console.log(result); // 30
或者先 x
后 y
:
add10 = add(10); result = add10(20); console.log(result); // 30
让咱们回过头来看最后一个例子。 add10
是用一个参数调用 add
的结果。并控制台中输出它。
add10
是一个函数,它接受一个 y
并返回 x + y
。在你提供 y
以后,它会立刻计算并返回你所要的最终结果。
高阶函数的最大好处多是更高的可重用性。没有它,JavaScript 数组的主要方法 —— map
,filter
和 reduce
将不存在!
这是一个用户列表。咱们将对他们的信息进行一些计算。
users = [{ name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 }];
若是没有高阶函数,咱们须要用循环来模仿 map
的功能。
getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"]
或者咱们能够这样作!
usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"]
在没有高阶函数的世界中,咱们仍然须要循环来从新实现 filter
的功能。
startsWithB = (string) => string .toLowerCase() .startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }]
或者咱们能够这样作!
namesStartingWithB = users .filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }]
是的,reduce......没有更高阶的功能,实现不了那么多很酷的东西!!😁
total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75
这个怎么样?
totalAge = users .reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75