将函数类型的值传递给其他函数不仅十分有用,而且还是JavaScript中一个重要的功能。我们可以在编写函数的时候把某些特定的操作预留出来,并在真正的函数调用中将具体的操作作为函数传递进来,实现完整的计算过程。
数组和函数对象中都提供了很多实用的高阶函数,下表展示了一部分实用的函数:
对象 | 函数/方法 | 用途 | 解释 |
---|---|---|---|
数组 | forEach | 数组遍历 | 用于遍历数组元素,实现某些特定功能 |
数组 | filter | 数组过滤 | 用于过滤掉一些元素,构造一个新数组 |
数组 | map | 数组转换 | 构建一个新数组,并通过一个函数处理每个元素,将处理结果放入新数组中 |
数组 | reduce | 数据汇总 | 将数组元素最终归纳成一个值 |
函数 | apply方法 | 参数传递 | 通过该方法调用函数,并使用数组来指定函数参数 |
函数 | bind方法 | 参数绑定 | 用于创建一个新函数,并预先确定其中一部分参数 |
下面将分别介绍上表中各个函数的具体使用方法。
一、数组
1、forEach函数
forEach函数是数组的一个标准方法,是数组遍历的抽象,是数组每个元素的处理函数。
语法:
array.forEach(function(args){函数体});
说明:
将array数组中的每个元素作为function函数的参数传入函数体执行相应操作,遍历所有元素后结束。参数名(args)可以自己随意设置,不影响结果。
示例:for循环与forEach比较
2、filter函数
forEach函数也是数组的一个标准方法,用于筛选数组中符合一定条件的元素,并组成一个新数组。
语法:
array.filter(function(args){筛选的条件});
说明:
将array数组中的每个元素作为function函数的参数传入函数体,执行相应筛选操作。执行完成后,返回数组中满足条件的元素组成的一个新的数组。参数名(args)可以自己随意设置,不影响结果。
示例:筛选数组中小于0的元素。
3、map函数
map方法可以对数组中的每个元素调用函数,然后利用返回值来偶见一个新的数组,实现转换数组的操作。新建数组的长度与输入的数组一致,但其中的内容却通过对每个元素调用的函数“映射”成新的形式。
语法:
array.map(function(args){函数体});
说明:
将array数组中的每个元素通过function函数进行处理。执行完成后,返回由处理后元素组成的新的数组。参数名(args)可以自己随意设置,不影响结果。
示例:将数组中的所有元素+10。
4、reduce函数
reduce函数也称为fold操作,可以把这个过程看成折叠数组的操作,每次操作一个元素。函数包含两个参数:执行合并操作的函数、初值。
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
说明:
reduce函数执行时,将initialValue送入function函数的total作为初始值,再循环遍历数组,将数组每一元素作为currentValue传入function函数,并进行操作,最终得到结果。
function(…)——必需。用于执行每个数组元素的函数。
initialValue——可选。传递给函数的初始值,无则默认为0
函数参数:
total——必需。初始值, 或者计算结束后的返回值。
currentValue——必需。当前元素
currentIndex——可选。当前元素的索引
arr——可选。当前元素所属的数组对象。
示例:求初值1加上数组中的所有元素之和。
二、函数
1、apply()方法
apply()方法接受两个参数:一个是在其中运行函数的作用域,另一个是参数数组。
其中,第二个参数可以是Array的实例,也可以是arguments对象(与数组相似的对象),并使用这些参数调用其所属的函数。
定义:
应用某一对象的一个方法,用另一个对象替换当前对象。即apply()方法能劫持另外一个对象的方法,继承另外一个对象的属性。
语法:
Function.apply(obj,args)方法能接收两个参数
说明:
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)
注意:
如果 args 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 args 和 obj 任何一个参数,那么 Global 对象将被用作 obj, 并且无法被传递任何参数。
示例:Student类接收了Person类传递的name和age参数,继承了Person类的属性,并将Person类中的this改为指向Student类。
2、bind()方法
与bind类似的方法还有call和apply,其中的第一个参数都可以理解为 “将自己伪装成参数的成员函数” 其中call和apply 都会立即执行,bind会返回一个新方法。
语法:
function.bind(thisArg,[arg1[,arg2[,…[,argN]]]])
说明:
bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
参数:
function——必选。一个函数对象。
thisArg——必选。 this 关键字可在新函数中引用的对象。
arg1[,arg2[,argN]]]——可选。要传递到新函数的参数的列表。
返回值:
与 function 函数相同的新函数,thisArg 对象和初始参数除外。
注意:
bind()主要是为了改变函数内部的this指向,这个是在ECMA5以后加入的,所以IE8一下的浏览器不支持。若this的值为“null”,表示返回的这个新函数调用function时会将args作为第一个参数,并将传递给该函数的剩余参数一起传递给function。
如果指定的 function 不是函数,则将引发 TypeError 异常。
示例:sayColor()调用bind()并传入对象o,创建了objectSayColor()函数。objectSayColor()函数的this值等于o,因此即使是在全局作用域中调用这个函数,也会看到“blue”。
附加:call()方法
类似于apply方法,该方法也可以用于函数调用,但该方法会像普通函数一样接受参数,我们不需要将参数放到数组中。和apply和bind方法一样,你也可以向call方法传递一个特定的this值。
为了便于学习,下面附上相关资料链接供参考
JavaScript Array对象——属性及方法一览(菜鸟教程)
JavaScript函数中的apply()、call()、bind()方法
JavaScript参考文档 bind 方法