js高阶函数|青训营笔记

75 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第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
})