什么是高阶函数
高阶函数是一个接收函数作为参数或将函数作为输出返回的函数。
首先简单的看下几个JS内置的高阶函数
Array.prototype.map
map() 方法通过调用对输入数组中每个元素调用回调函数来创建一个新数组。
map() 方法将获取回调函数中的每个返回值,并使用这些值创建一个新数组。
传递给 map() 方法的回调函数接受 3 个参数:element,index 和 array。
//得到已知数组元素值二倍的数组
const arr1=[1,2,3]
const arr2=arr1.map((element)=>element*2)
console.log(arr2)
Array.prototype.filter
filter()
方法会创建一个新数组,其中包含所有通过回调函数测试的元素。 传递给 filter()
方法的回调函数接受3个参数:element,index 和 array。
//得到数组中长度大于6的字符串
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
Array.prototype.reduce
reducer 函数(回调)接受四个参数:accumulator,currentValue,currentIndex,sourceArray。
//求数组和
const arr=[1,2,3,4]
const sum=arr.reduce((accumulator,currentValue)=>{
return accumulator+currentValue
})
console.log(sum)
接下来我们自己创建一个高阶函数:
假设我们有一个字符串数组,我们希望把它转换为整数数组,其中每个元素代表原始数组中字符串的长度。
//构建map方法
const words= ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function mapForEach(arr,fn){
const newArray=[]
for(let i=0;i<arr.legth;i++){
newArray.push(
fn(arr[i])
)
}
return newArray
}
const result=mapForEach(words,function (item){
return item.length
})
console.log(result)
我们创建了一个高阶函数 mapForEach
,它接受一个数组和一个回调函数 fn。 它循环遍历传入的数组,并在每次迭代时在 newArray.push
方法调用回调函数 fn
。
回调函数 fn 接收数组的当前元素并返回该元素的长度,该元素存储在 newArray 中。 for 循环完成后,newArray 被返回并赋值给 lenArray。