登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript高阶函数的详细介绍(附代码)

不言
发布: 2019-03-16 10:38:38
转载
2585人浏览过

本篇文章给大家带来的内容是关于JavaScript高阶函数的详细介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

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

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

1045104004-5c89cf0a7f7d7_articlex.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 的结果。并控制台中输出它。

3073584220-5c89cf38a64e6_articlex.png

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

3944606209-5c89cf44e479e_articlex.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......没有更高阶的功能,实现不了那么多很酷的东西!!

以上就是JavaScript高阶函数的详细介绍(附代码)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学