专栏首页京程一灯JavaScript 高阶函数快速入门 [每日前端夜话0x3A]

JavaScript 高阶函数快速入门 [每日前端夜话0x3A]

每日前端夜话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种方式:

  1. 把它们当作参数传给其它函数
  2. 把他们设定成对象属性
  3. 保存在数组中
  4. 把它们设为变量的形式

作为参数的函数

1isEven = (num) => num % 2 === 0;
2result = [1, 2, 3, 4].filter(isEven);
3console.log(result); // [2, 4]

看看 filter是如何用 isEven 来决定保留哪些数字的? isEven是一个函数,是另一个函数的参数

它由每个数字的 filter 调用,并使用返回值 truefalse 来确定这个数字是否应该保留或丢弃。

返回函数

1add = (x) => (y) => x + y;

add 需要两个参数,但不是一次全部提供。这是一个只需要 x 的函数,它返回一个只需要y的函数。因为 JavaScript 允许函数成为返回值 —— 就像字符串、数字、布尔值那样。

如果你愿意,仍然可以立即提供 xy,并进行双重调用

1result = add(10)(20);
2console.log(result); // 30

或者先 xy

1add10 = add(10);
2result = add10(20);
3console.log(result); // 30

让我们回过头来看最后一个例子。 add10 是用一个参数调用 add 的结果。并控制台中输出它。

add10 是一个函数,它接受一个 y 并返回 x + y。在你提供 y 之后,它会马上计算并返回你所要的最终结果。

更高的可重用性

高阶函数的最大好处可能是更高的可重用性。没有它,JavaScript 数组的主要方法 —— mapfilterreduce 将不存在!

这是一个用户列表。我们将对他们的信息进行一些计算。

 1users = [{
 2  name: 'Yazeed',
 3  age: 25
 4}, {
 5  name: 'Sam',
 6  age: 30
 7}, {
 8  name: 'Bill',
 9  age: 20
10}];

Map

如果没有高阶函数,我们需要用循环来模仿 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

在没有高阶函数的世界中,我们仍然需要循环来重新实现 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

是的,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

总结

  • 字符串、数字、bool、数组和对象可以存储为变量,数组和属性或方法。
  • JavaScript 以相同的方式处理函数。
  • 这允许在其他函数上运行另外一个函数:高阶函数
  • Map、filter 和 reduce 是典型的例子 —— 并且使变换、搜索和列表求和等常见模式更加容易!

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速优化 Web 性能的10 个手段

    优化网站的性能需要花费大量的时间,并且如果要根据自己的需求进行优化则花费的时间可能更多。

    疯狂的技术宅
  • 深入理解 JavaScript 回调函数 [每日前端夜话0xDF]

    JavaScript 回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,在阅读本文之后,你将能够克服以前使用回调方法...

    疯狂的技术宅
  • 程序员的三十岁究竟在迷茫什么?

    这是京程一灯一位学员找工作的时候,还没谈技术之前的面试条件。三十岁已经成了程序员的一道坎儿。

    疯狂的技术宅
  • 斯坦福CS231n - CNN for Visual Recognition(2)-lecture3(上)线性分类器、损失函数

      由于之前KNN分类器的缺点,让我们很自然地去寻找有更加强大地方法去完成图像分类任务,这种方法主要有两部分组成: 评分函数(score function)...

    李智
  • 桥接模式(JavaScript版)9

    //桥接模式 //第一种是先画图片完再画颜色,不分离 //第二种是先两者分离,然后是先各自画颜色和图片再融合起来就行了

    用户7873631
  • ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。 ES6(ECMAScript 6)是即将到来的新版本JavaSc...

    庞小明
  • java计算某日期之后的日期

    HUC思梦
  • 推荐一个yaml文件转json文件的在线工具

    YAML的全称是YAML Ain’t Markup Language,是一种简洁的非标记语言,以数据为中心,使用空白,缩进,和分行组织数据,从而使得表示更加简洁...

    Jerry Wang
  • 使用Python解析豆瓣上Json格式数据

    用python解析我们想要的数据如:id、rating里的max 、tags第一行的name值

    chaplinthink
  • Envoy 配置 HTTPS 证书

    本节我们将演示如何使用 Envoy 保护 HTTP 网络请求。确保 HTTP 流量安全对于保护用户隐私和数据是至关重要的。下面我们来了解下如何在 Envoy 中...

    我是阳明

扫码关注云+社区

领取腾讯云代金券