高阶函数的英文叫Higher-order function ,什么是高阶函数呢>?

JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。

一个最简单的高阶函数:

function add(x, y, f) {
return f(x) + f(y);
}

用代码验证一下:

add(-5, 6, Math.abs); // 11

  

map/reduce

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

function pow(x) {
return x * x;
} var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

  

educe

再看reduce的用法。Array的reduce()把一个函数作用在这个Array[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

比方说对一个Array求和,就可以用reduce实现:

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25

  

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
把一个Array中的空字符串删掉,可以这么写: var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']
可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

  

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr
return true;
});
利用filter,可以巧妙地去除Array的重复元素

去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

  

简单总结:

map 对数组里的每一个对象应用函数

arr.map(fun())

reduce 对数组的每两两计算结果.通常用于求和

fun (x,y){

return x*y;

}

arr.map(fun)

filter(foo) 过滤一些不符合条件的数值

JavaScript 高阶函数的更多相关文章

  1. JavaScript高阶函数之filter、map、reduce

    JavaScript高阶函数 filter(过滤) 用法: 用于过滤,就是把数组中的每个元素,使用回调函数func进行校验,回调函数func返回一个布尔值,将返回值为 true 的元素放入新数组 参数 ...

  2. JavaScript高阶函数

    所谓高阶函数(higher-order function) 就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数. 下面的例子接收两个函数f()和g(),并返回一个新的函数用以计算f(g ...

  3. JavaScript高阶函数 map reduce filter sort

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

  4. JavaScript高阶函数的应用

    定义 高阶函数是指至少满足下列条件之一的函数: 函数可以作为参数被传递: 函数可以作为返回值输出. JavaScript语言中的函数显然满足高阶函数的条件,在实际开发中,无论是将函数当作参数传递,还是 ...

  5. JavaScript 高阶函数 + generator生成器

    map/reduce map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x ...

  6. 浅析javascript高阶函数

    什么是高阶函数:在数学和计算机科学中,高阶函数是至少满足下列一个条件的函数: 1. 接受一个或多个函数作为输入: 2. 输出一个函数.在数学中它们也叫做算子(运算符)或泛函.微积分中的导数就是常见的例 ...

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

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

  8. JavaScript高阶函数(Heigher-order function)

    概念 <javascript设计模式和开发实践>中定义 函数既可作为参数被传递,也可以作为返回值输出 满足以下条件: 接受一个或多个函数作为输入 输出一个函数 高阶函数一般是那些函数型包含 ...

  9. Javascript 高阶函数等

    高阶函数 函数可以接受另一个函数作为参数 称为 高阶函数. map : arr.map(pow); 数组.map(函数); reduce :arr.reduce(function(){ }); 数组. ...

随机推荐

  1. Python撰写mail

    版本1   指定邮箱进行发送 """ 说明:指定账户密码进行邮件发送 由312051952@qq.com-->c4kaichen@163.com "&qu ...

  2. 基于CentOS搭建个人Leanote云笔记本

    Leanote 依赖 MongoDB 作为数据存储,下面开始安装MongoDB: 1. 下载启动 MongoDB 下载 MongoDB 进入 /home 目录,并下载 MongoDB: cd /hom ...

  3. Pillow《转载》

    Pillow https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432002 ...

  4. 关于ARM Linux下的SD卡及U盘的挂载问题

    内核配置并运行后,挂载SD卡,出现问题: zynq> mount -t /dev/mmcblk1 /mntmount: mounting /dev/mmcblk0 on /mnt failed: ...

  5. postgresql分区(引用)

    1 建立大表.   2 创建分区继承   3 定义Rule或者Trigger? 1 建立大表        CREATE TABLE student (student_id bigserial, na ...

  6. 【Selenium】各种方式在选择的时候应该怎么选择

    最后再总结一下,各种方式在选择的时候应该怎么选择: 1. 当页面元素有id属性时,最好尽量用id来定位.但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法. ...

  7. python中的第三方日志模块logging

    基本上每个系统都有自己的日志系统,可以使自己写的,也可以是第三方的.下面来简单介绍一下python中第三方的日志模块,入手还是比较简单的,但是也很容易给自己埋雷. 下面是我参考的资料链接 入手demo ...

  8. Spring线程池的5个要素

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-// ...

  9. 1816647 - Error "Data file of SAP Note is incomplete" uploading a note in SNOTE

    ymptom When uploading an SAP Note in transaction SNOTE you receive the error "Data file of SAP ...

  10. Unable to complete the scan for annotations for web application [/wrs] due to a StackOverflowError. Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies.

    tomcat启动报错:Jul 20, 2018 11:48:37 AM org.apache.catalina.core.ContainerBase addChildInternalSEVERE: C ...