如何写好JS—常用的高阶函数| 青训营笔记

91 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

如何写好JavaScript

今天来介绍高阶常见的函数

高阶函数

高阶函数英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。在JS中许多内置函数例如 Array.prototype.map()、Array.prototype.filter()都是高阶函数,我们在使用的时候需要传入一个函数作为参数。

HOF

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
function once(fn) {
  return function(...args) {
    if(fn) {
      const ret = fn.apply(this, args); //确保函数只执行一次
      fn = null;
      return ret;
    }
  }
}

因为高阶函数接受的是函数作为参数,所以在定义这些高阶函数的时候要注意,在调用once的时候传入的参数是fn,而在fn中传入的参数args应写在once的return语句中。这就相当于once的参数是指定一个函数,而在返回语句中才传入这个指定函数的参数。

function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);          //确保函数组多500ms执行一次
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}
function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);         //当事件不被调用的时候过100ms后执行函数
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

高阶函数有利于纯函数的编写,提高代码可调试能力。 什么是纯函数

  1. 返回结果只依赖其参数
  2. 函数执行过程中没有副作用

为什么纯函数很重要?

  1. 纯函数不那么复杂
  2. 更容易调试
  3. 易于组合
  4. 易于并行化