JS中的高阶函数

高阶函数：一个函数如果接收另一个函数作为参数，或者该函数会返回另外一个函数作为返回值，那么这个函数就被称之为一个高阶函数。

1.JS 中的自己编写的高阶函数

1）一个函数作为另一个函数的返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
function makeAdder(count) {
function add(num) {
return count+num
}
return add
}
var add5 = makeAdder(5)
//这里的add5实际上是一个函数，因为makeAdder()返回值为一个函数
console.log(add5(6))
// 这就可以定制一些函数
// 定制一个和10相加的函数
var add10 = makeAdder(10)

2）接收另一个函数作为参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 这样写可以使得函数内部更加灵活，不是写死的函数
// 这种方式更适合于封装工具类的函数
function calc(n1, n2, calcFn) {
console.log(calcFn(n1,n2));
}
function add(n1, n2) {
return n1+n2
}
function sub(n1, n2) {
return n1-n2
}
var m = 20
var n = 10
// 使用加法函数
calc(m, n, add)
// 使用减法函数
calc(m, n, sub)

2.数组中的常见的内置高阶函数

1）数组中的filter方法

array.filter(function(item,index,array){ })

其中item必须有，是数组中的每一个元素，index可选，是数组的下标，arr可选，是将这整个数组都传入进来。当用不到全部的传入变量的时候，可以直接写item就可以，但是在实际的调用过程中会将这三个值都传入。
有几个元素就会调用几次，函数体中编写过滤的逻辑。

1
2
3
4
5
6
7
8
// 一个过滤出数组中元素为偶数的方法
var nums = [10, 5, 11, 100, 55]
var newNums = nums.filter(function (item, index, arr) {
return item % 2 ===0
// 偶数
})
console.log(newNums);

2）数组中的map方法

array.map(function(item,index,array){ })

其中item必须有，是数组中的每一个元素，index可选，是数组的下标，arr可选，是将这整个数组都传入进来。

1
2
3
4
5
6
var nums = [10, 5, 11, 100, 55]
var newNums = nums.map(function (item) {
return item * 10
})
console.log(newNums);

调用这个map函数之后会组成一个新数组，由原数组的每一个元素调用一个指定的方法（写在函数体中的代码）后的返回值组成的新数组。

3）数组中的forEach方法
forEach：元素遍历，这个函数是没有返回值的。

array.forEach(function(item,index,array){})

forEach方法中的function回调有三个参数：第一个参数item是必需的，是遍历的数组内容，第二个参数index是可选的，是对应的数组索引，第三个参数array是可选的，是数组本身.

4） 数组中的reduce方法
reduce：用于对数组元素进行累加，会对数组中的所有元素调用指定的回调函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(prevValue,
currentValue,currentIndex,array){},initialValue)

prevValue是必需的，表示是上一轮循环计算结束后的返回值，但是第一次是没有值的，这个就表示初始值。currentValue是必需的，表示当前元素。currentIndex是可选的，表示当前元素的索引。array是可选的，表示当前这个数组,这个initialValue其实就是累加前和的初始值，不写的话默认是0.

1
2
3
4
5
6
var nums = [10, 5, 11, 100, 55]
var total = nums.reduce(function (prevValue, item) {
return prevValue+item
},0)
console.log(total);

5）数组中的find方法
find方法返回数组中通过（测试）函数内逻辑判断的第一个元素的值，也就是按照函数体中的条件进行的精准查找。当数组中的元素在测试条件时返回为true,之后的元素不需要调用这个函数；如果没有符合条件的值就返回undefined。

array.find(function(item,index,array){})

第一个参数item是必需的，是遍历的数组内容，第二个参数index是可选的，是对应的数组索引，第三个参数array是可选的，是数组本身.

6）数组中的findIndex方法
findIndex方法其实和find方法差不多，用法相同，也是循环查找，只不过这个函数查找的是符合条件的元素的索引值。

最后

以上就是酷酷寒风最近收集整理的关于JS中的高阶函数的全部内容，更多相关JS中内容请搜索靠谱客的其他文章。