我是靠谱客的博主 酷酷寒风,最近开发中收集的这篇文章主要介绍JS中的高阶函数,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

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

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

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)接收另一个函数作为参数

// 这样写可以使得函数内部更加灵活,不是写死的函数
// 这种方式更适合于封装工具类的函数
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就可以,但是在实际的调用过程中会将这三个值都传入。
有几个元素就会调用几次,函数体中编写过滤的逻辑。

// 一个过滤出数组中元素为偶数的方法
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可选,是将这整个数组都传入进来。

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.

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中的高阶函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(105)

评论列表共有 0 条评论

立即
投稿
返回
顶部