这是我参与「第四届青训营 」笔记创作活动的的第4天
前言:这几天笔试有考到高阶函数,再结合javascript的青训营课程整理复习一下js高阶函数
一、 重点内容:
1,高阶函数概念
2,Once函数
3, Throttle,Debounced函数
4,map函数
5,filter函数
5,reduce函数
二,详细知识介绍
高阶函数
定义:
高阶函数是以函数作为参数的,并且可以将函数作为结果返回的函数,即:
输入:
一个或多个函数
输出: 一个函数
满足以上一个条件的函数即为高阶函数。如:数组的map.filter reduce
Once
定义:传入函数只能执行一次。且第二次及以后再调用时,仍会返回第一次执行的值。
为了使只执行一次的需求量覆盖不同的事件处理,我们可以将这个需求剥离出来 这个过程我们称为过程抽象
function once(fn){
return function(...args){
if(fn){
const ret =fn.apply(this.args);
fn=null;
return ret;
}
}}
ret变量: 额外声明的用于缓存结果的
当返回的新函数被调用时,我们先将参数传给 fn,拿到返回值缓存到 ret。然后将 fn 设置为 null,用于标识别已经执行了一次,最后返回 ret。 下次再调用时,我们通过判断 fn 为 false,直接返回缓存的 ret。
Throttle
节流函数。 当事件触发次数过多时,造成不必要的性能消耗,则可以用throttle显示触发频率
Debounced
防抖函数 希望等待所有内容都完成后或者过一定时间后再进行保存,无需实时保存
map
map方法接收一个函数作为参数 ,遍历数组,并且返回一个新的数组,新数组里的每个元素都执行map传入的函数(PS:返回值是一个新数组,不改变原数组)
let a1={1,2,3};
let a2=a1.map(i =>i+1);
filter
定义:filter方法接收一个函数作为参数,通过这个函数来指定筛选数组的规则,最后返回满足规则的新数组
Array.filter(function(currentValue, indedx, arr), thisValue)
currentValue:当前元素的值 必选
index: 当前元素的索引值
arr:当前元素属于的数组对象
let a={1,2,3,4,5}
let b= a.filter(i =>{
return num > 2
})
reduce
reduce函数对数组中的所有内容进行汇总。
reduce()把一个函数作用在这个数组的[ , , ,]上,这个函数必须接收两个参数
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
必需元素: total ,currentValue
let a ={1,2,3}
let sum = arr.reduce((value, item) => {
return value + item
})