高阶函数

一.什么是高阶函数

高阶函数是接受函数作为参数并且(或者)返回函数作为输出的函数
所以,高阶函数至少满足下列条件之一:

  • 函数可以作为参数被传递
  • 函数作为返回值输出

01. 函数可以作为参数被传递

1. 基本格式

<script>
        function fn(callback){ // 函数可以作为参数被传递
            callback && callback()
        }
        fn(
            function(){console.log('higher-order function')}
        )
</script>

2. 举例 - 回调函数

 $(".box").click(function () {
    $(".item").animate({ height: "200px" });
 });

02. 函数作为返回值输出

1. 基本格式

<script>
        function fn() {// 函数可以作为返回值输出
            return function () {
                console.log('higher-order function')
            }
        }
        fn()()
</script>

2. 举例 - 判断是否为数组(字符串或数字)

<script>
      var isString = function(obj) {
          return Object.prototype.toString.call(obj) === '[object String]'
      }
      var isArray = function(obj) {
          return Object.prototype.toString.call(obj) === '[object Array]'
      }
      var isNumber = function(obj) {
          return Object.prototype.toString.call(obj) === '[object Number]'
      }
      console.log(isString('string')) // true
      console.log(isArray([1,2,3]))// true
      console.log(isNumber(123))// true
</script>

二. 高阶函数与抽象

1. 什么是抽象

《JavaScript ES6函数式编程入门经典》中给出描述:一个编写涉及数值操作代码的程序员可能不会对底层硬件中的数字表现方式感兴趣,(不在乎它们是16位还是32位整数),色括这些细节在哪里被屏蔽。可以说,它们被抽象出来了,只留下简单的数字给程序员处理,这样的思想就是抽象思想。
而高阶函数就是定义抽象的过程

2. 高阶函数就是定义抽象

如下:是一个myforEach 的函数,函数接收array和fn两个参数

<script>
        const myforEach =  (arrary,fn) => {
            for(var i = 0; i< arrary.length;i++){
                fn(arrary[i])
            }
        }
</script>

myforEach 所做的工作就是实现对数组遍历,对于调用者,只需要按照函数定义的规则去传递参数就能实现功能。
所以,抽象关注思想,而不是具体细节。

<script>
        myforEach([1,2,3],(data)=>{
            console.log(data) // 1 2 3
        })
</script>

三. 编写一个高阶函数

JavaScript 内置了很多函数,比如toFixed()、toString()等内置函数,但是在实际开发中必须要自己编写一些函数来解决项目需求。
数组中很多方法类似Array.map、Array.every、Array.some中都可以将一个函数作为参数,因此他们都是高阶函数。
数组方法都存在于Array.prototype中,我们可以在Array.prototype上扩展自己的方法。

1. map

<script>
        Array.prototype.myMap = function (func) {
            let results = [];
            for (let i = 0; i < this.length; i++) {
                results.push(func(this[i]));
            }
            return results;
        }
        const array = [1, 2, 3, 4];
        const myMap1 = array.myMap(x => x * 2);
        console.log(myMap1); // [2, 4, 6, 8]
</script>

与Array.map检验

<script>
        const array = [1, 2, 3, 4];
        const myMap2 = array.map(x => x * 2);
        console.log(myMap2);  // [2, 4, 6, 8]
</script>

下一篇:一篇秒懂正则表达式https://mp.weixin.qq.com/s/voNtxibjDRDZIuSAtRHaiQ

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 高阶函数 概念 Javascript中的函数本质上都指向某个变量,既然变量可以指向函数,函数的参数可以接受变量,那...
    夏末远歌阅读 1,612评论 0 0
  • 本文是 重温基础 系列文章的第二十一篇。今日感受:想家。 本人自己整理的【Cute-JavaScript】资料,包...
    pingan8787阅读 1,823评论 0 0
  • 组合软件:4. 高阶函数 原文链接: medium.com 高阶函数是以一个函数为实参,或者返回一个函数的函数。高...
    zzz雪人阅读 1,670评论 0 0
  • https://www.zcfy.cc/article/higher-order-functions-compos...
    zzz雪人阅读 1,522评论 0 1
  • 最近在学习函数式编程,整个 team 都在啃一本叫《Mostly adequate guide》的函数式编程教材,...
    anOnion阅读 9,605评论 3 5

友情链接更多精彩内容