JavaScript 高阶函数快速入门

翻译：疯狂的技术宅原文：https://medium.freecodecamp.o…本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章把函数以数据的形式去使用，并解锁一些强大的模式。高阶函数接受和/或返回另外一个函数的函数被称为高阶函数。之所以是高阶，是因为它并非字符串、数字或布尔值，而是从更高层次来操作函数。漂亮的元。使用 JavaScript 中的函数，你可以将它们存储为变量在数组中使用它们将它们指定为对象属性（方法）将它们作为参数进行传递将它们从其他函数中返回就像所有的其他数据一样。这是关键所在。函数操作数据字符串是数据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种类型是所有主流语言中的一等公民。是什么使他们成为一等公民的？你可以传递它们，将它们存储在变量和数组中，将它们用作计算的输入。你可以像使用任何数据一样去使用它们。函数也可以作为数据的形式去用在javascript中把函数用作数据的4种方式：把它们当作参数传给其它函数把他们设定成对象属性保存在数组中把它们设为变量的形式作为参数的函数isEven = (num) => num % 2 === 0;result = [1, 2, 3, 4].filter(isEven);console.log(result); // [2, 4]看看 filter 是如何用 isEven 来决定保留哪些数字的？ isEven是一个函数，是另一个函数的参数。它由每个数字的 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如果没有高阶函数，我们需要用循环来模仿 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在没有高阶函数的世界中，我们仍然需要循环来重新实现 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是的，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总结字符串、数字、bool、数组和对象可以存储为变量，数组和属性或方法。JavaScript 以相同的方式处理函数。这允许在其他函数上运行另外一个函数：高阶函数。Map、filter 和 reduce 是典型的例子 —— 并且使变换、搜索和列表求和等常见模式更加容易！本文首发微信公众号：jingchengyideng欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目世界顶级公司的前端面试都问些什么CSS Flexbox 可视化手册过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！从设计者的角度看 ReactCSS粘性定位是怎样工作的一步步教你用HTML5 SVG实现动画效果程序员30岁前月薪达不到30K，该何去何从7个开放式的前端面试题React 教程：快速上手指南