JS基础——高阶函数

doodlewind 发布于2019-08-23 15:58 / 1002人阅读

摘要：定义高阶函数是至少满足下面一个条件的函数接收一个或多个函数作为参数。当然我们也可以通过高阶函数来自己实现我们可以通过封装高阶函数来复用和简化我们的代码。

定义

高阶函数是至少满足下面一个条件的函数：
1、接收一个或多个函数作为参数。比如filter函数
2、返回一个函数。比如bind函数
举个例子：比如我们要筛数组[1,2,3,4,5]中大于3的所有元素，我们通常的实现方法为：

let newArr = [];
for(let i = 0,len = arr.length; i < len; i++){
    arr[i] > 3 && newArr.push(arr[i])
}

而使用数组filter方法的话，只需要 let newArr = arr.filter((item) => {return item > 3})。当然我们也可以通过高阶函数来自己实现：

Array.prototype.myFilter = function (fn){
    let newArr = [];
    for(let i = 0,len = this.length; i < len; i++){
        fn(this[i]) && newArr.push(this[i])
    }
    return newArr;
}
[1,2,3,4,5].myFilter((item) => { return item > 3})

我们可以通过封装高阶函数来复用和简化我们的代码。

柯里化

柯里化是将一个多参数的函数转换成多个单参数的函数，这个函数会返回一个函数去处理下一个参数。也就是把fn(a,b,c)转换为newFn(a)(b)(c)这种形象。柯里化常见的应用有：参数复用、延迟计算。比如我们有个拼接接口地址的函数：

function getUrl(service,context,api){
    return service + context + api;
}
let loginUrl = getUrl("http://localhost:8080/","auth","/login")  
let logoutUrl = getUrl("http://localhost:8080/","auth","/logout")

每次前两个参数的值都是一样，我们可以柯里化来封装下来达到参数复用：

function curry(fn){
    let args = Array.prototype.slice.call(arguments,1);    
    return function(){
        let innerArgs = Array.prototype.slice.call(arguments);
        let finalArgs = args.concat(innerArgs);
        if(finalArgs.length < fn.length){         //fn.length为函数的参数个数
            return curry.call(this,fn,...finalArgs)
        }else{
            return fn.apply(null,finalArgs)
        }
    }
}
var getAuthUrl = curry(getUrl,"http://localhost:8080/","auth");
let loginUrl = getAuthUrl("/login")
let logoutUrl = getAuthUrl("/logout")

组合函数

组合函数类似于管道，多个函数的执行时，上一个函数的返回值会自动传入到第二个参数继续执行。比如我们替换一个url中的参数：

function replaceToken(str){
    return str.replace(/{token}/g,"123455")
}
function replaceAccount(str){
    return str.replace(/{account}/g,"xuriliang")
}
replaceAccount(replaceToken("http://localhost/api/login?token={token}&account={account}"))

我们可以利用这种嵌套的写法来实现，但如果嵌套过多，代码可读性就不是很好了。当然我们也可以在一个函数里分过程实现，不过这样函数就不符合单一原则了。利用函数组合我们可以这样写：

function compose() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while (i--) result = args[i].call(this, result);
        return result;
    }
}
compose(replaceToken,replaceAccount)("http://localhost/api/login?token={token}&account={account}")

组合函数使得我们可以使用一些通用的函数，组合出各种复杂运算。这也是函数编程中pointfree的概念。

云服务器 GPU云服务器高阶函数高阶函数应用基础函数高阶组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102594.html

【重温基础】21.高阶函数

摘要：欢迎您的支持系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断重温基础闭包重温基础事件本章节复习的是中的高阶函数，可以提高我们的开发效率。本文是重温基础系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础...

wua_wua2012 2019-08-23 15:05 评论0 收藏0
【重温基础】JS中的常用高阶函数介绍

摘要：也可以直接调用内置方法常用高阶函数方法的作用是接收一个函数作为参数，对数组中每个元素按顺序调用一次传入的函数并返回结果，不改变原数组，返回一个新数组。 Ps. 晚上加班到快十点，回来赶紧整理整理这篇文章，今天老大给我推荐了一篇文章，我从写技术博客中收获到了什么？- J_Knight_，感受也是很多，自己也需要慢慢养成记录博客的习惯，即使起步艰难，难以坚持，但还是要让自己加油加油。前...

gitmilk 2019-08-23 13:53 评论0 收藏0
JavaScript设计模式

摘要：可能因为先入为主，在编程之中，往往不由自主地以的逻辑编程思路设计模式进行开发。这是原型模式很重要的一条原则。关于闭包与内存泄露的问题，请移步原型模式闭包与高阶函数应该可以说是设计模式的基础要领吧。在下一章，再分享一下的几种常用设计模式。前在学习使用Javascript之前，我的程序猿生涯里面仅有接触的编程语言是C#跟Java——忽略当年在大学补考了N次的C与VB。从静态编程语言，...

keke 2019-08-21 10:38 评论0 收藏0
JS 利用高阶函数实现函数缓存(备忘模式)

摘要：所以这里可以利用高阶函数的思想来实现一个简单的缓存，我可以在函数内部用一个对象存储输入的参数，如果下次再输入相同的参数，那就比较一下对象的属性，把值从这个对象里面取出来。 1. 高阶函数高阶函数就是那种输入参数里面有一个或者多个函数，输出也是函数的函数，这个在js里面主要是利用闭包实现的，最简单的就是经常看到的在一个函数内部输出另一个函数，比如 var test = function...

hightopo 2019-08-22 11:22 评论0 收藏0