高阶函数的英文叫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. bzoj5103: [POI2018]Ró?norodno

    Description 给定一个n行m列的矩阵,请对于每个长宽均为k的连续子正方形,统计里面出现过的数值的种类数. Input 第一行包含三个正整数n,m,k(n,m<=3000,k<=m ...

  2. Java中用字符串常量赋值和使用new构造String对象的区别

    String str1 = "ABC"; String str2 = new String("ABC"); String str1 = “ABC”;可能创建一个 ...

  3. [转]Oracle left join \ right join

    select 1 from a,b where a.id=b.id(+) 等同于 a left join b on a.id=b.id select 1 from a,b where a.id(+)= ...

  4. ef join查询

    temp = temp.OrderByDescending(s => s.CreateTime).Skip((param.PageIndex - ) * param.PageSize).Take ...

  5. django 分页和中间件

    分页 Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views h ...

  6. Java 基础测试题

    一.选择题 1.下面哪些是合法的变量名? ( DEG  ) A.2variable B. .variable2 C. ._whatavariable D._3_ E.$anothervar F.#my ...

  7. 深入理解Tomcat

    简介 tomcat是一个web服务器,运行jsp和servlet,使用HTTP与客户端(通常是浏览器)进行通信. 构成 下图是tomcat的架构,可以看出:核心内容是Connector和Contain ...

  8. mvn多环境下的配置

    在应用中,我们经常会遇到本地,测试和生产3种不同的环境,因此需要去配置不同的application. 定义resources: <resources> <resource> & ...

  9. 总结http状态码和200,304状态码

    状态码  响应类别  中文意思 1XX  信息性状态码(Informational) 服务器正在处理请求 2XX 成功状态码(Success) 请求已正常处理完毕 3XX 重定向状态码(Redirec ...

  10. [C语言]进阶|程序结构

    ------------------------------------------------------------------------------------ 全局变量: // main.c ...