JavaScript--详解函数

JavaScript 函数是被设计为执行特定任务的代码块。就是可被重复调用执行的代码块。

一、函数相关概念

  • 函数是一等公民
  • 高阶函数
  • 闭包

1、函数是一等公民

在JavaScript中函数就是一个普通的对象(可以通过new Function()来创建),我们可以把函数存储到变量/数组中,还可以把它作为另外一个函数的参数和返回值,甚至我们还可以在程序运行的时候通过new Function(alert('hello'))来构造一个新的函数。
函数是一等公民是学习高阶函数、柯里化等的基础。

函数是一等公民的三个特性:

  • 函数可以存储在变量中
  • 函数作为参数
  • 函数作为返回值

函数可以存储在变量中

//示例1
let func = function () {
     
    console.log('hello, world');
}
func()

//示例2
const CarCtrl = {
     
    start(pos) {
      return Bus.start(pos) },
    run(pos) {
      return Bus.run(pos) },
    end(pos) {
      return Bus.end(pos) }
}
//优化
const CarCtrl = {
     
    start: Bus.start,
    run: Bus.run,
    end: Bus.end
}

2、高阶函数

高阶函数(Higher-order function):

  • 可以把函数作为参数传递给另一个函数
  • 可以把函数作为另一个函数的返回结果

高阶函数-函数作为参数

//***模拟forEach--对循环的抽象***
function forEach(array, fn) {
     
    for (let i = 0; i < array.length; i++) {
     
        fn(array[i])
    }
}
//测试
let arr = [1, 3, 5, 7]
forEach(arr, function (item) {
     
    console.log(item);
})

//***模拟filter--对查找数据的抽象***
function filter(array, fn) {
     
    let results = []
    for (let i = 0; i < array.length; i++) {
     
        if (fn(array[i])) {
     
            results.push(array[i]);
        }
    }
    return results
}
//测试
let arr1 = [1, 2, 3, 4, 5]
let res = filter(arr1, function (item) {
     
    return item % 2 === 0
})
console.log(res); //[2,4]

高阶函数-函数作为返回值

function msgPrint() {
     
    const msg = 'hello, function'
    return function () {
     
        console.log(msg);
    }
}
const fun = msgPrint()
fun() //hello, function
msgPrint()() //hello, function

//模拟once
function once(fn) {
     
    let done = false
    return function () {
     
        if (!done) {
     
            done = true
            return fn.apply(this, arguments)
        }
    }
}
let clicked = once(function (times) {
     
    console.log(`您点击了${
       times}次`);
})

clicked(1)
clicked(1)
clicked(1)
//结果只会打印一次: 您点击了1次

使用高阶函数的意义

  • 可以让我们的函数变得很灵活
  • 抽象可以帮我们屏蔽细节,让我们只用关注目标
  • 高阶函数是用来抽象通用问题的
  • 使代码更简洁
//面向过程的方式
let arr2 = [3, 5, 8]
for (let i = 0; i < arr2.length; i++) {
     
    console.log(arr2[i])
}
//高阶函数
let arr3 = [3, 5, 8]
//前面封装的通用的函数forEach
forEach(arr3, item => {
     
    console.log(item);
})

常用的高阶函数

  • forEach
  • map
  • filter
  • every
  • some
  • find/findIndex
  • reduce
  • sort

模拟常用高阶函数-map

const map = (array, fn) => {
     
    let results = []
    for (let item of array) {
     
        results.push(fn(item))
    }
    return results
}
//测试
let arr4 = [1, 2, 3]
arr4 = map(arr4, item => item * item)
console.log(arr4);  //[ 1, 4, 9 ]

模拟常用高阶函数-every

const every = (array, fn) => {
     
    let flag = true
    for (let item of array) {
     
        flag = fn(item)
        if (!flag) {
     
            break
        }
    }
    return flag
}
//测试
let arr5 = [3, 5, 6]
let result = every(arr5, item => item > 5)
console.log(result);  //false

模拟常用高阶函数-some

const some = (array, fn) => {
     
    let flag = false
    for (let item of array) {
     
        flag = fn(item)
        if (flag) {
     
            break
        }
    }
    return flag
}
//测试
let arr6 = [2, 3, 4, 6]
let r = some(arr6, item => item % 2 === 0)
console.log(r);  //true

3、闭包

闭包(Closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。
可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员。延长了外部函数的内部变量的作用范围。
从另一个作用域中访问一个函数的内部函数,并且在这个内部函数中可以访问到外部函数中的成员。

闭包案例:

//高阶函数-函数作为返回值
function msgPrint() {
     
    const msg = 'hello, function'
    return function () {
     
        console.log(msg);
    }
}
const fun = msgPrint()
fun() //hello, function
msgPrint()() //hello, function

闭包的本质:函数在执行的时候会放到一个执行栈上,当函数执行完毕之后会从执行栈上移除,但是堆上的作用域成员因为被外部引用不能释放,因此内部函数依然可以访问外部函数的成员。

//闭包-案例
function makePower(power) {
     
    return function (num) {
     
        return Math.pow(num, power)
    }
}
const power2 = makePower(2)
const power3 = makePower(3)
console.log(power2(4)); //16
console.log(power2(5)); //25
console.log(power3(4)); //64

二、函数式编程

函数式编程其实就是利用纯函数来实现一些细粒度的函数,然后再通过函数的组合,把这些细粒度的函数组合成功能更强大的函数。

  • 为什么要学习函数式编程
  • 什么是函数式编程
  • 函数式编程的特性(纯函数、柯里化、函数组合等)
  • 函数式编程的应用场景
  • 函数式编程库Lodash

1、为什么要学习函数式编程

函数式编程是非常古老的一个概念,早于第一台计算机的诞生,可以阅读函数式编程的历史一书来了解。
既然古老,为何我们还要学习函数式编程?

  • 函数式编程是随着React的流行受到越来越多的关注(React中的高阶组件就是使用高阶函数来实现的,高阶函数就是函数式编程的一个特性。)
  • Vue 3也开始拥抱函数式编程,流行框架都在趋向于函数式编程
  • 函数式编程可以抛弃掉烦人的this
  • 打包过程中可以更好的利用tree shaking来过滤无用代码
  • 方便测试,方便并行处理
  • 有很多库可以帮助我们进行函数式开发:lodash、underscore、ramda

2、什么是函数式编程

函数式编程(Functional Programming,简称FP),是编程范式之一,我们常见的编程范式:
(1.)面向过程编程
按照步骤来实现,一步一步的实现我们想要的功能。
(2.)面向对象编程
把现实世界中的事物抽象成程序世界中的类和对象,通过继承,封装和多态来演示事物事件的联系。
(3.)函数式编程
把现实世界中的事物和事物之间的联系抽象到程序世界中。(对运算过程的抽象)

  • 程序的本质:根据输入通过某种运算获得相应的输出,程序开发过程中会涉及很多有输入和输出的函数。
  • x->f(联系、映射)->y,y=f(x),f就是函数
  • 函数式编程中的函数指的不是程序中的函数(或方法),而是数学中的函数即映射关系,例如:y=sin(x),x和y的关系。
  • 纯函数:相同的输入始终要得到相同的输出
  • 函数式编程用来描述数据(函数)之间的映射
  • 函数式编程是建立在数学基础之上的
  • 函数式编程就是把一些运算过程抽象成函数,将来这些函数可以做到最大化重用
//面向过程编程
let n1 = 2;
let n2 = 3;
let sum = n1+n2;
console.log(sum);  //5

//函数式编程--代码可重用
function add(n1,n2) {
     
  return n1+n2;
}
let sum2 = add(1,5);
console.log(sum2);  //6

3、函数式编程的特性

  • 纯函数
  • 柯里化
  • 函数组合

(1.)纯函数

  • 相同的输入永远会得到相同的输出,而且没有可观察的副作用。
  • 纯函数就类似数学中的函数(用来描述输入和输出之间的关系),即y=f(x)。
  • lodash是一个纯函数的功能库,提供了对数组、数字、对象、字符串、函数等操作的一些方法。
  • 数组的slice和splice:
    • slice:纯函数,返回数组中的指定部分,不会改变原数组
    • splice:不纯的函数,对数组进行操作并返回该数组,会改变原数组
const arr = [2, 4, 5, 7, 8]
//纯函数
console.log(arr.slice(0, 3));  //[2,4,5]
console.log(arr.slice(0, 3));  //[2,4,5]
console.log(arr.slice(0, 3));  //[2,4,5]
//不纯的函数
console.log(arr.splice(0, 3)); //[2,4,5]
console.log(arr.splice(0, 3)); //[7,8]
console.log(arr.splice(0, 3)); //[]
  • 函数式编程不会保留计算中间的结果,所以变量是不可变的(无状态的)。
  • 我们可以把一个函数的执行结果交给另一个函数去处理。
    纯函数的好处
    • 可缓存
      因为纯函数对相同的输入始终有相同的结果,所以可以把纯函数的结果缓存起来。
//纯函数的好处--可缓存
//缓存圆的面积
const _ = require('lodash')
function getArea(r) {
     
    console.log(r);
    return Math.PI * r * r
}
let areaMemory = _.memoize(getArea)
console.log(areaMemory(4));
console.log(areaMemory(4));
console.log(areaMemory(4));
/*
4
50.26548245743669
50.26548245743669
50.26548245743669
*/

//自定义memorize
function memorize(f) {
     
    let cache = {
     }
    return function () {
     
        let key = JSON.stringify(arguments)
        cache[key] = cache[key] || f.apply(f, arguments)
        return cache[key]
    }
}
//测试
let areaMemory2 = memorize(getArea)
console.log(areaMemory2(4));
console.log(areaMemory2(4));
console.log(areaMemory2(4));
/*
4
50.26548245743669
50.26548245743669
50.26548245743669
*/
  • 可测试
    纯函数让测试更方便。
  • 并行处理
    在多线程环境下并行操作共享的内存数据很可能会出现意外情况。
    纯函数不需要访问共享的内存数据,所以在并行环境下可以任意运行纯函数(ES6出现了Web Worker)
    纯函数的副作用
  • 对于相同的输入永远会得到相同的输出,而且没有任何可观察的副作用
  • 副作用让一个函数变的不纯,纯函数根据相同的输入返回相同的输出,如果函数依赖外部的状态就无法保证输出相同,就会带来副作用。
//不纯的
let min = 16
function checkAge(age) {
     
    return age > min
}
//改造为纯函数(有硬编码,后续可以通过柯里化解决)
function checkAge2(age) {
     
    let min = 16
    return age > min
}
  • 副作用来源:配置文件、数据库、全局变量、获取用户的输入等
  • 所有的外部交互都有可能带来副作用,副作用也使得方法通用性下降不合适扩展和可重用性,同时副作用会给程序中带来安全隐患给程序带来不确定性,但是副作用不可能完全禁止,尽可能控制它们在可控范围内发生。

(2.)柯里化

  • 当一个函数有多个参数的时候先传递一部分参数调用它(这部分参数以后永远不变)
  • 然后返回一个新的函数接收剩余的参数,返回结果
//普通纯函数
function checkAge(min, age) {
     
    return age > min
}
//缺点:16重复
console.log(checkAge(16, 20));  //true
console.log(checkAge(16, 25));  //true
console.log(checkAge(26, 25));  //false

//柯里化
const checkAge2 = min => (age => age > min)
const checkAge16 = checkAge2(16)
const checkAge20 = checkAge2(20)
console.log(checkAge16(20));  //true
console.log(checkAge16(13));  //false

lodash中的柯里化函数(_.curry(func))

  • 柯里化可以帮我们把任意多参数的函数(多元函数)转化为一个一元函数。
  • 功能:创建一个函数,该函数接收一个或多个func的参数,如果func所需要的参数都被提供则执行func并返回执行的结果,否则继续返回该函数并等待接收剩余的参数。
  • 参数:需要柯里化的函数
  • 返回值:柯里化后的函数
const _ = require('lodash')

function getSum(a, b, c) {
     
    return a + b + c
}

const curried = _.curry(getSum)
console.log(curried(1, 2, 3));  //6
console.log(curried(1)(2, 3));  //6
console.log(curried(1, 2)(3));  //6

模拟柯里化函数

//模拟柯里化函数
function curry(func) {
     
    return function curriedFunc(...args) {
     
        //判断实参和形参的个数
        if (args.length < func.length) {
     
            return function () {
     
                return curriedFunc(...args.concat(Array.from(arguments)))
            }
        }
        return func(...args)
    }
}

const curried2 = curry(getSum)
console.log(curried2(1)(2, 3));  //6

总结:

  • 柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数
  • 这是一种对函数参数的‘缓存’
  • 让函数变的更灵活,让函数的粒度更小
  • 柯里化的内部就是使用了闭包
  • 可以把多元函数转换成一元函数,可以组合使用函数产生更强大的功能。

(3.)函数组合

  • 纯函数和柯理化很容易写出洋葱代码:h(g(f(x))),例如:.toUpper(.first(_.reverse(array)))
    JavaScript--详解函数_第1张图片
  • 函数组合可以让我们把细粒度的函数重新组合生成一个新的函数
    管道
    简单函数
    在这里插入图片描述
    复杂函数:
    JavaScript--详解函数_第2张图片
    fn = compose(f1,f2,f3)
    b = fn(a)

函数组合

  • 如果一个函数要经过多个函数处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数
  • 函数就像是数据的管道,函数组合就是把这些管道连接起来,让数据穿过多个管道形成最终结果
  • 函数组合默认是从右到左运行
//函数组合
function compose(f, g) {
     
    return function (value) {
     
        return f(g(value))
    }
}

function reverse(array) {
     
    return array.reverse()
}

function first(array) {
     
    return array[0]
}

const last = compose(first, reverse)
console.log(last([3, 1, 4, 5, 6]));  //6
  • 函数的组合要满足结合律:即我们既可以把g和h组合,也可以把f和h组合,结果都是一样的
//函数组合要满足结合律
// const fn = _.flowRight(toUpper, first, reverse)
// const fn = _.flowRight(_.flowRight(toUpper, first), reverse)
const fn = _.flowRight(toUpper, _.flowRight(first, reverse))
console.log(fn(['three', 'two', 'one']));  //ONE

lodash中提供的组合函数

  • flow()和flowRight()都可以组合多个函数
  • flow()是从左到右运行
  • flowRight()是从右到左运行,使用的更多一些
  • 数据优先,函数置后
//lodash中提供的组合函数flowRight
const _ = require('lodash')

const reverse = arr => arr.reverse()
const first = arr => arr[0]
const toUpper = s => s.toUpperCase()

const fn = _.flowRight(toUpper, first, reverse)
console.log(fn(['three', 'two', 'one']));  //ONE
  • 模拟lodash中的flowRight函数
//模拟lodash中的flowRight函数
function compose(...fns) {
     
    return function (value) {
     
        return fns.reverse().reduce(function (acc, fn) {
     
            return fn(acc)
        }, value)
    }
}
const fn2 = compose(toUpper, first, reverse)
console.log(fn2(['three', 'two', 'one']));  //ONE

//ES6写法
const compose2 = (...fns) => value => fns.reverse().reduce((acc, fn) => fn(acc), value)
const fn3 = compose2(toUpper, first, reverse)
console.log(fn3(['three', 'two', 'one']));  //ONE

函数组合–调试

//函数组合 调试
//题目: NEVER SAY GOODBYE -->  never-say-goodbye
const _ = require('lodash')
const split = _.curry((sep, str) => _.split(str, sep))
const join = _.curry((sep, array) => _.join(array, sep))

const log = v => {
     
    console.log(v);
    return v
}

const trace = _.curry((tag, v) => {
     
    console.log(tag, v);
    return v
})

const fn = _.flowRight(join('-'), _.toLower, split(' '))
console.log(fn('NEVER SAY GOODBYE'));
//n-e-v-e-r-,-s-a-y-,-g-o-o-d-b-y-e

//得到的结果有误,需要调试
const fn2 = _.flowRight(join('-'), _.toLower, log, split(' '))
console.log(fn2('NEVER SAY GOODBYE'));
//[ 'NEVER', 'SAY', 'GOODBYE' ]
//n-e-v-e-r-,-s-a-y-,-g-o-o-d-b-y-e

const map = _.curry((fn, array) => _.map(array, fn))
const fn3 = _.flowRight(join('-'), trace('map之后'), map(_.toLower), trace('split之后'), split(' '))
console.log(fn3('NEVER SAY GOODBYE'));
//split之后 [ 'NEVER', 'SAY', 'GOODBYE' ]
//map之后 [ 'never', 'say', 'goodbye' ]
//never-say-goodbye

lodash中的fp模块

  • 提供了实用的对函数式编程友好的方法
  • 提供了不可变auto-curried iteratee-first data-last的方法,即函数优先,数据置后
//lodash的fp模块
//题目: NEVER SAY GOODBYE -->  never-say-goodbye
const fp = require('lodash/fp')
const fn = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
console.log(fn('NEVER SAY GOODBYE'));
//never-say-goodbye

Point Free
它是一种编程风格,具体实现是函数组合。
我们可以把数据处理的过程定义成与数据无关的合成运算,不需要用到代表数据的那个参数,只要把简单的运算步骤合成到一起,在使用这种模式之前我们需要定义一些辅助的基本运算函数

  • 不需要指明处理的数据
  • 只需要合成运算过程
  • 需要定义一些辅助的基本运算函数
const f = fp.flowRight(fp.join('-'), fp.map(_.toLower), fp.split(' '))

函数式编程的核心是把运算过程抽象成函数,而Point Free模式就是把我们抽象出来的函数再合成成一个新的函数,这个抽象的过程依然不需要核心数据。

/非 Point Free 模式
// Hello World => hello_world
function f(word) {
     
    return word.toLowerCase().replace(/\s+/g, '_');
}
//Point Free 模式
const fp = require('lodash/fp')
const f1 = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
console.log(f1('Hello World'))
//hello_world
  • 使用 Point Free 的模式,把单词中的首字母提取并转换成大写
const fp = require('lodash/fp')
const firstLetterToUpper = fp.flowRight(fp.join('. '),
    fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' '))
console.log(firstLetterToUpper('world wild web'))
//W. W. W

4、函数式编程库Lodash

  • lodash是纯函数的代表,里面包含一些常用的细粒度函数和函数式编程需要用的函数。
  • lodash是一个纯函数的功能库,提供了对数组、数字、对象、字符串、函数等操作的一些方法
const _ = require('lodash')
const arr = ['tom', 'rock', 'jack']
console.log(_.first(arr));  //tom
console.log(_.last(arr));  //jack

console.log(_.toUpper(_.first(arr)));  //TOM
console.log(_.reverse(arr));  //[ 'jack', 'rock', 'tom' ]

const r = _.each(arr, item => {
     
    console.log(item);
})
console.log(r);  //[ 'jack', 'rock', 'tom' ]
  • lodash是一个node插件,使用之前请先安装此插件。

5、函子(Functor)

为什么要学函子
前面介绍了一些函数式编程的基础,但是还没介绍在函数式编程过程中如何把副作用(副作用会使函数不纯,但是副作用又无法避免)控制在可控范围内、异常处理、异步操作等(通过函子来处理这些)
什么是函子

  • 容器:包含值(内部维护,不对外公布)和值的变形关系(这个变形关系就是函数)
  • 函子:是一个特殊的容器,通过一个普通的对象实现,这个对象具有map方法,map方法接收一个参数(变形关系,即函数,用来处理值),即map方法可以运行一个函数对值进行处理(变形关系)。map方法返回的是一个新的函子对象,里面保存着新的值,我们始终不对外公布值,想要处理值的话,就要给map传递一个处理值的函数。
//*******函子(Functor)---原始写法 ********/
// 一个容器,包裹一个值
class Container {
     
    constructor(value) {
     
        this._value = value
    }
    // map 方法,传入变形关系,将容器里的每一个值映射到另一个容器
    map(fn) {
     
        return new Container(fn(this._value))
    }
}
//测试
const r = new Container(5).map(item => item + 1).map(item => item * item)
console.log(r);   //Container { _value: 36 }

//********函子(Functor)---优化写法 ********/
class Container2 {
     
    //of静态方法,可以省略new关键字创建对象
    static of(value) {
     
        return new Container(value)
    }
    constructor(value) {
     
        this._value = value
    }
    // map 方法,传入变形关系,将容器里的每一个值映射到另一个容器
    map(fn) {
     
        return Container2.of(fn(this._value))
    }
}
//测试
const r2 = Container2.of(8).map(item => item + 1).map(item => item * item)
console.log(r2);   //Container { _value: 81 }

//********函子(Functor)---演示null/undefined的问题(值不小心传了空值-副作用) ********/
Container2.of(null).map(item => item.toLowerCase())
//报错:TypeError: Cannot read property 'toLowerCase' of null
  • 函数式编程不直接操作值,而是由函子来完成
  • 函子就是一个实现了map契约的对象
  • 我们可以把函子想象成一个盒子,这个盒子里面封装了一个值
  • 想要处理盒子中的值,我们需要给盒子的map方法传递一个处理值的函数(纯函数),由这个函数来对值进行处理
  • 最终map方法返回一个包含新值的函数(函子),所以可以通过.map链式调用

MayBe函子

  • 编程过程中可能会遇到很多错误,需要对这些错误做相应的处理
  • MayBe函子的作用就是可以对外部的空值情况做处理(控制副作用在允许的范围)
//MayBe函子
class MayBe {
     
    static of(value) {
     
        return new MayBe(value)
    }
    constructor(value) {
     
        this._value = value
    }
    // 如果对空值变形的话直接返回 值为 null 的函子
    map(fn) {
     
        return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
    }
    isNothing() {
     
        return this._value === null || this._value === undefined
    }
}
//测试-传入 null 的情况
const r = MayBe.of(null).map(item => item.toLowerCase())
console.log(r);  //MayBe { _value: null }
//测试-传入具体值
const r2 = MayBe.of('hello functor').map(item => item.toUpperCase())
console.log(r2);  //MayBe { _value: 'HELLO FUNCTOR' }
  • 在 MayBe 函子中,我们很难确认是哪一步产生的空值问题,如:
const r3 = MayBe.of('hello baby')
			.map(item => item.toUpperCase())
			.map(item => null)
			.map(item => item.split(''))
console.log(r3);  //MayBe { _value: null }

Either函子

  • Either两者中的一个,类似if…else…的处理
  • 异常会让函数变得不纯,Either函子可以用来做异常处理
//Either函子
class Left {
     
    static of(value) {
     
        return new Left(value)
    }
    constructor(value) {
     
        this._value = value
    }
    map(fn) {
     
        return Left.of(fn(this._value))
    }
}

class Right {
     
    static of(value) {
     
        return new Right(value)
    }
    constructor(value) {
     
        this._value = value
    }
    map(fn) {
     
        return Right.of(fn(this._value))
    }
}

const r1 = Right.of(12).map(item => item + 2)
const r2 = Left.of(12).map(item => item + 2)
console.log(r1); //Right { _value: 14 }
console.log(r2); //Left { _value: 14 }
  • Either 用来处理异常

//测试--非法的输入
const r3 = parseJSON('{ name: zs }')
console.log(r3)  //Left { _value: { error: 'Unexpected token n in JSON at position 2' } }
//测试--合法的输入
const r4 = parseJSON('{ "name": "zs" }')
    .map(x => x.name.toUpperCase())
console.log(r4)  //Right { _value: 'ZS' }

IO函子

  • 它中的_value是一个函数,这里把函数作为值来处理
  • 它可以把不纯的动作存储到_value中,延迟执行这个不纯的动作(惰性执行),保证当前的操作纯
  • 把不纯的操作交给调用者来处理
const fp = require('lodash/fp')
//IO函子
class IO {
     
    static of(value) {
     
        return new IO(function () {
     
            return value
        })
    }
    constructor(fn) {
     
        this._value = fn
    }
    map(fn) {
     
    	//把当前的 value 和 传入的 fn 组合成一个新的函数
        return new IO(fp.flowRight(fn, this._value))
    }
}
//调用
const r = IO.of(process).map(p => p.execPath)
console.log(r);  //IO { _value: [Function] }
//调用IO函子中的方法
console.log(r._value());  //D:\Program Files\nodejs\node.exe

folktale

  • Task异步执行
    异步任务的执行过于复杂,我们使用folktale中的task来演示
  • folktale:一个标准的函数式编程库
  • 和lodash、ramda不同的是,它没有提供很多功能函数
  • 只提供了一些函数式处理的操作,如compose、curry等,一些函子Task、Either、MayBe等
// folktale 中的 compose、curry
const {
      compose, curry } = require('folktale/core/lambda')
const {
      toUpper, first } = require('lodash/fp')
let f1 = curry(2, (x, y) => {
     
    return x + y
})

console.log(f1(1, 2)) //3
console.log(f1(1)(2)) //3

let f2 = compose(toUpper, first)
console.log(f2(['one', 'two'])) //ONE
  • 使用task函子来执行异步任务
//task函子
const fs = require('fs')
const {
      task } = require('folktale/concurrency/task')
const {
      split, find } = require('lodash/fp')

function readFile(filename) {
     
    return task(resolver => {
     
        fs.readFile(filename, 'utf-8', (err, data) => {
     
            if (err) resolver.reject(err)
            resolver.resolve(data)
        })
    })
}
//测试
readFile('package.json')
    .map(split('\n'))
    .map(find(x => x.includes('version')))
    .run()
    .listen({
     
        onRejected: err => {
     
            console.log(err);
        },
        onResolved: value => {
     
            console.log(value);
        }
    })
//结果
// "version": "1.0.0",

Pointed 函子

  • Pointed函子是实现了of静态方法的函子
  • of方法是为了避免使用new来创建对象,更深层的含义是of方法用来把值放到上下文Context(把值放到容器中,使用map来处理值)
class Container{
     
	static of(value){
     
		return new Container(value)
	}
	......
}
Container.of(2)
.map(x => x + 5)

Monad(单子)函子

  • Monad函子可以解决函子嵌套的问题
  • Monad函子是可以变扁的Pointed函子,IO(IO(x))
  • 一个函子如果具有join和of两个方法并遵守一些定律就是一个Monad
// IO Monad
const fs = require('fs')
const fp = require('lodash/fp')

class IO {
     
    static of(value) {
     
        return new IO(function () {
     
            return value
        })
    }

    constructor(fn) {
     
        this._value = fn
    }

    map(fn) {
     
        return new IO(fp.flowRight(fn, this._value))
    }

    join() {
     
        return this._value()
    }

    flatMap(fn) {
     
        return this.map(fn).join()
    }
}

let readFile = function (filename) {
     
    return new IO(function () {
     
        return fs.readFileSync(filename, 'utf-8')
    })
}

let print = function (x) {
     
    return new IO(function () {
     
        console.log(x)
        return x
    })
}

let r = readFile('package.json')
    // .map(x => x.toUpperCase())
    .map(fp.toUpper)
    .flatMap(print)
    .join()

console.log(r)

附录

  • 函数式编程指北
  • 函数式编程入门
  • Pointfree 编程风格指南
  • 图解 Monad
  • Functors, Applicatives, And Monads In Pictures

你可能感兴趣的:(笔记,javascript,函数式编程,函数闭包,js,前端)