函数传参string_JavaScript 高阶函数入门浅析

f2079117eb9a50fb989a53d93b56a8b1.png

原文:https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/

译者:jingruzhang

校对者:acusp

高阶函数

高阶函数可以接收函数作为参数,同时也可以返回一个新的函数。

高阶函数之所以高阶,是因为高阶函数的参数和返回值对象可以是函数,这超越了普通函数处理的数据类型,例如字符串(strings)、数字(numbers)、布尔值(booleans)等。

JavaScript 中,函数的应用场景很丰富:

  • 作为变量存储

  • 在数组中使用

  • 作为对象属性(即方法)

  • 作为参数传递

  • 作为其他函数的返回值

理解高阶函数的关键在于,函数即数据

数据是函数运作的基本

数据:字符串(Strings)

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');

console.log(result); // 'Hi, User!'

数据:数字(Numbers)

double = (x) => x * 2;
result = double(4);

console.log(result); // 8

数据:布尔值(Booleans)

getClearance = (allowed) => allowed ?  'Access granted' :  'Access denied';

result1 = getClearance(true);
result2 = getClearance(false);

console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

数据:对象(Objects)

getFirstName = (obj) => obj.firstName;

result = getFirstName({  
    firstName: 'Yazeed'
});

console.log(result); // 'Yazeed'

数据:数组(Arrays)

len = (array) => array.length;
result = len([1, 2, 3]);

console.log(result); // 3

在所有的主流语言中,以上这五种数据类型被称为 “头等对象”(原文:first-class citizen, https://www.wikiwand.com/en/First-class_citizen)。

为什么是“头等”呢?因为这五种数据类型既可以作为参数传递,又可以存储在变量或者数组中,还可以作为变量用于计算,是数据的基本形式。

函数也是数据

a15d6316e2faa7707c925d5e54606c19.png

函数作为参数

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

console.log(result); // [2, 4]

请观察 filter 函数是如何使用 isEven 函数来判断要保留哪些内容的。这里的 isEven 是一个函数,作为参数传入了 filter 函数中。

filter 函数每次在做判断的时候都会调用 isEven 函数,用 isEven 函数返回的布尔值来决定当前数值的去留。

函数作为返回值

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

add 函数需要两个参数,但不需要它们俩同时传入,第一次传参传入 x 就会返还一个新函数,这个函数需要传入 y 参数。

能够这样操作的基础在于 JavaScript 语言允许函数本身作为返回值存在,就像函数可以返回字符串(strings)、数字(numbers)、布尔值(booleans)等,JS 函数还可以返回另一个函数。

当然,我们也可以使用“双重调用”的方式,一次性提供 xy 两个参数:

result = add(10)(20);

console.log(result); // 30

或者分两次调用,先传参数 x,再传参数 y

add10 = add(10);
result = add10(20);

console.log(result); // 30

在上面这个例子中, add10 函数是第一次调用 add 函数的返回值,可以尝试用 console.log 把结果打出来观察一下。

1e1e1e88c3c3d793b6cc6332cc4b208a.png

add10 函数会接收 y 参数,然后返回 x + y 值。一旦 y 值到位,函数会立马进行运算并返回结果。

1bb36e6f1ce0b5c57390822821729da3.png

可重复利用性

高阶函数的魅力在于它的可重复利用性,如果不是高阶函数,mapfilterreduce 等强大的数组函数就不可能存在。

假设我们有一组用户,如下所示,然后我们要对该数组进行操作。

users = [
  {
    name: 'Yazeed',
    age: 25
  },
  {
    name: 'Sam',
    age: 30
  },
  {
    name: 'Bill',
    age: 20
  }
];

Map

没有高阶函数的话,我们必须回到 for 循环的怀抱才能实现 map 函数的操作。

getName = (user) => user.name;
usernames = [];

for (let i = 0; i   const name = getName(users[i]);

  usernames.push(name);
}

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

map 函数就简单多啦!

usernames = users.map(getName);

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在没有高阶函数的情况下,必须要用 for 循环来实现 filter 函数的功能。

startsWithB = (string) => string.toLowerCase().startsWith('b');

namesStartingWithB = [];

for (let i = 0; i   if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

filter 函数就简单多啦!

namesStartingWithB = users.filter((user) => startsWithB(user.name));

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

reduce 函数也是的……没有高阶函数的话,很多高端操作都是无法实现的!

total = 0;

for (let i = 0; i   total += users[i].age;
}

console.log(total);
// 75

那这样是不是简单多啦?

totalAge = users.reduce((total, user) => user.age + total, 0);

console.log(totalAge);
// 75

总结

  • 字符串(strings)、数字(numbers)、布尔值(booleans)、数组(arrays)、对象(objects)可以作为变量(variables)、数组(arrays)、属性( properties)或者方法(methods)存储起来。

  • JavaScript 语言中,函数也是像数据一样同等对待的。

  • 因此函数可以作为另外一个函数的参数或者返回值使用,这样的做法叫高阶函数

  • mapfilterreduce 等函数就是高阶函数的最佳代表,它们让数组的处理(改变,搜索,相加等)变得简单不少!

737eff306d19d07341e9fe37b734599e.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/311446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET Core开发实战(第13课:配置绑定:使用强类型对象承载配置数据)--学习笔记...

13 | 配置绑定:使用强类型对象承载配置数据要点:1、支持将配置值绑定到已有对象2、支持将配置值绑定到私有属性上继续使用上一节代码首先定义一个类作为接收配置的实例class Config {public string Key1 { get; set; }public bool Key5 { get; set; }pub…

工业互联网白皮书_发布|《工业互联网平台安全白皮书(2020)》发布

12月4日,2020年中国工业信息安全大会暨全国工控安全深度行(京津冀站)在北京国际会议中心举行。大会由国家工业信息安全发展研究中心、工业信息安全产业发展联盟主办,以“贯彻总体国家安全观,把牢工控安全基准线”为主题。会上,国家…

ASP.NET Core Razor 视图预编译、动态编译

0x01 前言ASP.NET Core在默认发布情况下,会启动预编译将试图编译成xx.Views.dll,也许在视图中打算修改一处很细小的地方我们需要再重新编译视图进行发布。下面我将从 ASP.NET Core 3 之前版本到 ASP.NET Core 3X 之后版本的一个配置列下下方供大家参考。0x02 预编译…

《C++ Primer》2.1.2节练习

练习2.3 #include <iostream> using namespace std;int main() {unsigned u 10, u2 42;cout << u2 - u << endl;cout << u - u2 << endl;int i 10, i2 42;cout << i2 - i << endl;cout << i - i2 << endl;cout <…

如何构建基于.NET Core和云环境下的微服务技术体系?

这个内核用处不大&#xff0c;但.NET 内核却666随着业务需求的增长&#xff0c;我们现在开发非常大型和复杂的项目&#xff0c;需要更多时间来构建和部署。每当质量检查报告任何问题时&#xff0c;我们都需要对其进行调试或修复&#xff0c;然后部署整个代码。为了降低这些复杂…

UVA - 11059 Maximum Product-暴力枚举

输入n个元素组成的序列s,找出一个乘积最大的连续子序列&#xff0c;如果这个子序列不是整数&#xff0c;则输出0. 解题思路&#xff1a; 枚举起点和终点&#xff0c;把中间的数相乘&#xff0c;然后找到最大的结果。 代码如下&#xff1a; #include <iostream> using…

好用的vp n推荐2020_哪个牌子的沐浴露好,2020年最新沐浴露选购测评,好用好闻易清洗沐浴露品牌推荐...

您好&#xff0c;感谢您关注并阅读本文。声明&#xff1a;本文系作者原创&#xff0c;未经作者授权不得转载、引用。如果您看完本文觉得对您有帮助&#xff0c;请点赞、收藏和关注&#xff0c;作者感激不尽。本文详细地介绍一下沐浴露使用方法和选购建议指南&#xff0c;以及沐…

【朝夕Net社区技术专刊】Core3.1 WebApi集群实战专题---WebApi环境搭建运行发布部署篇...

欢迎大家阅读《朝夕Net社区技术专刊》第1期我们致力于.NetCore的推广和落地&#xff0c;为更好的帮助大家学习&#xff0c;方便分享干货&#xff0c;特创此刊&#xff01;很高兴你能成为首期读者&#xff0c;文末福利不要错过哦&#xff01;本文通过5大部分进行解读&#xff1a…

【朝夕Net社区技术专刊】Core3.1 WebApi集群实战专题-Corre3.1WebApi配置集成日志/配置Swagger...

欢迎大家阅读《朝夕Net社区技术专刊》第2期我们致力于.NetCore的推广和落地&#xff0c;为更好的帮助大家学习&#xff0c;方便分享干货&#xff0c;特创此刊&#xff01;很高兴你能成为首期读者&#xff0c;文末福利不要错过哦&#xff01;本文通过3大部分进行解读&#xff1a…

一文读懂开源许可证异同

对开源许可证异同的对比并非源自担忧。对开源许可证进行比较并不容易&#xff0c;什么 copyleft 啦&#xff0c;什么宽松许可证啦&#xff0c;光 GNU 就有 GPL 2 和 GPL 3 之分&#xff0c;OSI 批准的许可证就有八十多个&#xff0c;而开源生态下存在了数百个许可证。对于我们这…

WARNING: Ignoring invalid distribution -ip

原因: 之前安装插件失败/中途退出&#xff0c;导致插件安装出现异常导致 解决方案: 进入你的项目里面,进入venv文件夹,进入Lib,进入site-packages,删除~ip开头的文件如图所示

根据后序和中序求二叉树的层序

题目描述&#xff1a;给出二叉树的后序和中序序列&#xff0c;输出二叉树的层序遍历序列。 题目分析&#xff1a;中序遍历为左根右&#xff0c;后序遍历为左右根&#xff0c;所以后序遍历的最后一个节点为根节点&#xff0c;在中序遍历上找出根节点的位置&#xff0c;将树分为…

mysql数据剪切到新表_6、MySQL核心DDL语句

命令类型服务器端命令获取命令帮助数据库管理查看数据库基础变量SQL组成创建修改删除表管理创建示例一示例二示例三一个常见的创建表结构的示例表修改改名表结构修改添加/删除字段修改字段键管理索引索引管理视图视图操作命令类型服务器端命令DDL&#xff1a;数据定义语言&…

pycharm里面下载pip(不用去官网)

注意:pycharm版本较低的话右侧有个"",一样的效果

C++ stringstream输入方式

在题目中&#xff0c;我们有时候会遇到不知道要输入多少个元素&#xff0c;这个时候我们要怎么读取呢&#xff1f; 采用stringstream输入方式&#xff0c;头文件为< sstream > 代码如下&#xff1a; #include <iostream> #include <cstring> #include <…

基于.NET下的人工智能|利用ICSharpCore搭建基于.NET Core的机器学习和深度学习的本地开发环境...

每个人都习惯使用Python去完成机器学习和深度学习的工作&#xff0c;但是对于习惯于某种特定语言的人来说&#xff0c;转型不是那么容易的事。这两年我花了不少时间在Python&#xff0c;毕竟工作的重心也从移动开发转为机器学习和深度学习。感谢我的老板给我很大的空间去开拓新…

ValueError: check_hostname requires server_hostnamejie解决方案

原因: 1. 下载包带的插件等级高了 2. 网络代理没关 3.pip误删 解决方案: 对应上面原因: 1.终端(terminal)输入代码 pip install urllib31.25.112. 3.针对第三点 https://blog.csdn.net/weixin_53051556/article/details/118566675