基础-高阶函数

一 、概述

高阶，听起来挺唬人的，和高等数学、高阶微分方程一样唬人。那在在react里的高阶组件时，就涉及到高阶函数，那什么是高阶函数？

1.带有一个或多个函数作为参数输入的函数； 2.返回一个函数。

只要满足了其中一点，就输入高阶函数了。那我们有没有用过？arr.map()、arr.filter()等等数组的方法，还有bind（)都属于高阶函数。

出现那么多高阶函数，那高阶函数有什么用呢? 在函数式编程里把每个函数看作是一个运算，而高阶函数表达则是运算的缺失和延续。

• 缺失

  function map() {
        const result = [];
        for (let i = 0; i < resourceArr.length; i++) {
          resourceArr[i] --> newValue; //旧的值转化为新的值
          result.push(newValue);
        }
        return result
      }

在这个过程中，转换的这一部分是缺失的，缺失了一个运算，这个运算的本质就是一个函数，你需要传一个函数给我，让我来处理这个转换。

 function map(fn) {
        const result = [];
        for (let i = 0; i < resourceArr.length; i++) {
          const newValue = fn(resourceArr[i])
          result.push(newValue);
        }
        return result
      }

• 延续

   function bind(thisArg) {
        const fn = function () {}; //绑定了 this 的函数
        return fn
      }

只负责生成这个函数，那这个函数什么时候运行，这个不确定。所以把这个函数作为返回值返回，那在将来的任何时候都可以调用这个函数。

在运算缺失的时候，需要函数作为参数。在对运算进行延续的时候，需要返回一个函数。

高阶函数是必须要会的，它常常出现在公共的模块，公共的代码里。高阶函数有两个层面的学习使用和编写。

使用就是去使用常见的高阶函数，比如数组的reduce等常见方法。核心就是编写，如何编写一个高阶函数，那才是最重要的。

二、编写动画函数

现在封装一个js动画，任何时候，只要需要js动画，就可以使用这个函数来完成。动画的本质，就是在一个时间之内，从一个数字到另一个数字。

/**
 * @description: js 动画函数
 * @param {* number} duration 间隔时间
 * @param {* number} from 起始时间
 * @param {* number} to 结束时间
 * @return {*}
 */
function animation(duration, from, to) {
  const dis = to - from; //时间
  const speed = dis / duration; //速度
  const startTime = Date.now();
  let value = from; //当前值
  console.log("from", value);
}

每隔一小段时间发生变化。

  function _run() {
    const now = Date.now();
    const time = now - startTime; // 起始时间到现在的时间
    const d = time * speed; //运动的距离
    value = from + d; //当前的距离
    console.log("value", value);
  }

然后开始动起来。

function animation(duration, from, to) {
  const dis = to - from; //时间
  const speed = dis / duration; //速度
  const startTime = Date.now();
  let value = from; //当前值
  console.log("from", value);

  function _run() {
    const now = Date.now();
    const time = now - startTime; // 起始时间到现在的时间

    if (time >= duration) {
      value = to;
      console.log("value", value);
      return;
    }
    const d = time * speed; //运动的距离
    value = from + d; //当前的距离
    console.log("value", value);

    requestAnimationFrame(_run);
  }
  requestAnimationFrame(_run);
}

这些点击之后，数字就是从from减少到to。 现在这是数字是能变化了，但是和页面没有关系，也就是说缺少了一个步骤，需要去计算页面上的那个价格。所以需要接收一个函数作为参数。

function animation(duration, from, to, onProgress) {
  const dis = to - from; //时间
  const speed = dis / duration; //速度
  const startTime = Date.now();
  let value = from; //当前值
  onProgress(value);

  function _run() {
    const now = Date.now();
    const time = now - startTime; // 起始时间到现在的时间

    if (time >= duration) {
      value = to;
      onProgress(value);
      return;
    }
    const d = time * speed; //运动的距离
    value = from + d; //当前的距离
    onProgress(value);
    requestAnimationFrame(_run);
  }
  requestAnimationFrame(_run);
}

   const label = document.querySelector("div");
      const btn = document.querySelector("button");
      btn.addEventListener("click", () => {
        animation(1000, 2999, 299, (value) => {
          label.innerHTML = `价格:${value.toFixed(2)}`;
        });
      });

分析一下，都是一段时间内，从一个值到另一个值，默认是匀速，那就可以用来做倒计时。

 animation(5000, 5, 0, (value) => {
          const str = value === 0 ? "验证码" : `${value.toFixed(1)} S`;
          label.innerHTML = str;
        });

三、高阶函数实现防抖节流。

这个在另一篇里有写到哈防抖节流