JavaScript 高阶函数快速入门

nanfeiyan 发布于2019-08-23 15:57 / 476人阅读

摘要：高阶函数接受和或返回另外一个函数的函数被称为高阶函数。之所以是高阶，是因为它并非字符串数字或布尔值，而是从更高层次来操作函数。更高的可重用性高阶函数的最大好处可能是更高的可重用性。如果没有高阶函数，我们需要用循环来模仿的功能。

翻译：疯狂的技术宅
原文：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......没有更高阶的功能，实现不了那么多很酷的东西!!

服务器托管 GPU服务器高阶函数高阶函数应用前端快速入门快速排序函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102580.html

JavaScript函数式编程入门经典

摘要：函数式编程的定义函数是一段可以通过其名称被调用的代码。纯函数大多数函数式编程的好处来自于编写纯函数，纯函数是对给定的输入返回相同的输出的函数，并且纯函数不应依赖任何外部变量，也不应改变任何外部变量。一个持续更新的github笔记，链接地址：Front-End-Basics，可以watch,也可以star。此篇文章的地址：JavaScript函数式编程入门经典正文开始什么是函...

silvertheo 2019-08-23 17:17 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
函数式编程了解一下（上）

摘要：一直以来没有对函数式编程有一个全面的学习和使用，或者说没有一个深刻的思考。是不是轻松了其实函数式编程主张的就是以抽象的方式创建函数。后面咱们在系统性的学习下函数式编程。一直以来没有对函数式编程有一个全面的学习和使用，或者说没有一个深刻的思考。最近看到一些博客文章，突然觉得函数式编程还是蛮有意思的。看了些书和文章。这里记载下感悟和收获。欢迎团队姜某人多多指点@姜少。由于博客秉持着简...

int64 2019-08-22 16:21 评论0 收藏0
封装Vue组件的一些技巧

摘要：根据组件单向数据流和和事件通信机制，需要由子组件通过事件通知父组件，并在父组件中修改原始的数据，完成状态的更新。本文同步在个人博客shymean.com上，欢迎关注写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹...

韩冰 2019-05-23 17:35 评论0 收藏0