高阶函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。

例如Array.prototype.mapArray.prototype.filter并且Array.prototype.reduce是一些高阶功能,内置的语言。

1. Array.prototype.map

map()方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组。该map()方法将从回调函数中获取每个返回值,并使用这些值创建一个新数组。

传递给回调函数map()方法接受3个参数:element,index,和array。

假设我们有一个数组,我们想要创建一个新数组,其中包含第一个数组的每个值的两倍。让我们看看如何使用和不使用高阶函数来解决问题。

不用高阶函数

 const arr1 = [1,2,3];
const arr2 = [];
for(let i = 0; i <arr1.length; i ++){
arr2.push(arr1 [i] * 2);
}
//打印[2,4,6]
console.log(arr2);

使用高阶函数

  const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); //使用es6的箭头函数  打印[2,4,6]     

 创建自定义高阶函数  

 //假设我们有一个字符串数组,我们希望将此数组转换为整数数组,其中每个元素表示原始数组中字符串的长度。
const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
function mapForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
newArray.push(
fn(arr[i])
);
}
return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
return item.length;
});
// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);

2. Array.prototype.filter

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

//返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
var result = ages.filter( item => { return item >= 18})
// 输出结果 32,33,40

3. Array.prototype.reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法: arr.reduce(callback,[initialValue]) 

total :必需。初始值, 或者计算结束后的返回值。
currentValue:必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值 (作为第一次调用 callback 的第一个参数。) // 计算数组元素相加后的总和:
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum); 打印结果:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
//这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

reduce的简单用法

// 1.简单的就是我们常用的数组求和,求乘积了。
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24 // 2.计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
// 注意这里设置了 初始值 {} 来存储 pre[cur] key 值;与pre对比含有就自增 // 3.数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4] // 4.将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5] // 5.对象里的属性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
]; var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //

8.Javascript-map、reduce、filter 等高阶函数的更多相关文章

  1. python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))

    1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...

  2. Javascript:是你的高阶函数

    在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可 ...

  3. reduce内置高阶函数求和

    >>> def f(x, y): ... return x+y ... >>> reduce(f, a, ) >>> reduce(lambda ...

  4. JavaScript高阶函数 map reduce filter sort

    本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 高阶函数            一个函数就接收另一个函数作为参数,这种函数就称之为高阶函数          1.高阶函数之map:   ...

  5. JavaScript高阶函数map/reduce、filter和sort

    map() 举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上. 由于map()方法定义在JavaScript的Array中,我们调用Arr ...

  6. Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊

    函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...

  7. Python高阶函数(Map、Reduce、Filter)

    Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...

  8. (转)Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)

    原文:https://www.cnblogs.com/chenwolong/p/reduce.html 函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数 ...

  9. Python高阶函数(Map、Reduce、Filter)和lambda函数一起使用 ,三剑客

    Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...

随机推荐

  1. 小人大作战v0.02原型(单机)发布

    运行环境,pc,windows 链接:https://pan.baidu.com/s/1X5XR0flRAVuinnydNyRNng 提取码:cp9q 复制这段内容后打开百度网盘手机App,操作更方便 ...

  2. LOJ#107. 维护全序集(FHQ Treap)

    题面 传送门 题解 板子,没啥好说的 //minamoto #include<bits/stdc++.h> #define R register #define inline __inli ...

  3. python--线程知识详解

    Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1.1.threading模块 threading模块建立在_thread模块之上.thread模块以低级=原始的方式来处理 ...

  4. L3865

    一,写题 1,2^j 判断不了? 2,好像是有一个数据不对.. 3,debug是生命之源. 4,反正就对了30分

  5. Pandas | 25 文件读写

    Pandas I/O API是一套像pd.read_csv()一样返回Pandas对象的顶级读取器函数. 读取文本文件(或平面文件)的两个主要功能是read_csv()和read_table().它们 ...

  6. 分布式事务解决方案(二)消息系统避免分布式事务 & MQ事务消息 & Sagas 事务模型

    参考文档: 如何用消息系统避免分布式事务:http://blog.jobbole.com/89140/ https://www.cnblogs.com/savorboard/p/distributed ...

  7. 图、流程图、ER图怎么画及常见画图工具(流程图文章汇总)

    流程图基本符号 首先要记住图中1.2.3.4.6这几种符号. 图片摘自网络 流程图基本概念及入门 简易流程图 流程图简介(基本符号与绘制工具) 你可能学了假流程图,三步教会你绘制大厂流程图 使用流程图 ...

  8. 【IntelliJ IDEA学习之五】IntelliJ IDEA 搭建项目

    版本:IntelliJIDEA2018.1.4 一.同一窗口展示多个应用(弊端:耗内存) idea没有eclipse workspace的概念,如果想在同一窗口显示多个应用,可以按照如下方式来做:1. ...

  9. 学习Linux要知道的知识点总结

    1 如何查看Linux的user和hostname? (1)打开终端查看 终端左侧的root@zlkj:~$,前面的root为user - 用户名,后面的zlkj为hostname - 主机名. (2 ...

  10. 使用 KVO 可能会拖慢启动速度

    问题  在某一次启动速度优化中,发现最开始的某个 runLoop 中,一个runLoop 耗时很长.发现一个 KVO 变量的初始化消耗了13ms之久,这对启动速度是不可接受了. 源码分析 用 Ins ...