基础-高阶函数

一 、概述

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

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

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

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

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

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

js 复制代码
 function map(fn) {
        const result = [];
        for (let i = 0; i < resourceArr.length; i++) {
          const newValue = fn(resourceArr[i])
          result.push(newValue);
        }
        return result
      }
  • 延续
js 复制代码
   function bind(thisArg) {
        const fn = function () {}; //绑定了 this 的函数
        return fn
      }

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

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

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

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

二、编写动画函数

现在封装一个js动画,任何时候,只要需要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);
}

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

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

然后开始动起来。

js 复制代码
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。 现在这是数字是能变化了,但是和页面没有关系,也就是说缺少了一个步骤,需要去计算页面上的那个价格。所以需要接收一个函数作为参数。

js 复制代码
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);
}
js 复制代码
   const label = document.querySelector("div");
      const btn = document.querySelector("button");
      btn.addEventListener("click", () => {
        animation(1000, 2999, 299, (value) => {
          label.innerHTML = `价格:${value.toFixed(2)}`;
        });
      });

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

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

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

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

相关推荐
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
速易达网络5 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou6 小时前
js前端this指向规则
开发语言·前端·javascript
lichong9516 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer6 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9516 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马6 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱7 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌7 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静7 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能