JavaScript 高阶函数快速入门

2019-03-15 admin

翻译:疯狂的技术宅 原文:https://medium.freecodecamp.o…


本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章


把函数以数据的形式去使用,并解锁一些强大的模式。

clipboard.png

高阶函数

接受和/或返回另外一个函数的函数被称为高阶函数

之所以是_高阶_,是因为它并非字符串、数字或布尔值,而是从_更高_层次来操作函数。漂亮的元。

使用 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种类型是所有主流语言中的一等公民。

是什么使他们成为一等公民的?你可以传递它们,将它们存储在变量和数组中,将它们用作计算的输入。你可以像使用_任何数据_一样去使用它们。

函数也可以作为数据的形式去用

clipboard.png

在javascript中把函数用作数据的4种方式:

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

作为参数的函数

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

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

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

返回函数

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

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

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

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

或者先 xy

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

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

clipboard.png

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

clipboard.png

更高的可重用性

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

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

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

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章



欢迎继续阅读本专栏其它高赞文章:

[转载]原文链接:https://segmentfault.com/a/1190000018500782

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-57787.html

文章标题:JavaScript 高阶函数快速入门

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
回到顶部