JavaScript 函数是被设计为执行特定任务的代码块。就是可被重复调用执行的代码块。
在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
}
高阶函数(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);
})
常用的高阶函数
模拟常用高阶函数-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
闭包(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
函数式编程其实就是利用纯函数来实现一些细粒度的函数,然后再通过函数的组合,把这些细粒度的函数组合成功能更强大的函数。
函数式编程是非常古老的一个概念,早于第一台计算机的诞生,可以阅读函数式编程的历史一书来了解。
既然古老,为何我们还要学习函数式编程?
函数式编程(Functional Programming,简称FP),是编程范式之一,我们常见的编程范式:
(1.)面向过程编程
按照步骤来实现,一步一步的实现我们想要的功能。
(2.)面向对象编程
把现实世界中的事物抽象成程序世界中的类和对象,通过继承,封装和多态来演示事物事件的联系。
(3.)函数式编程
把现实世界中的事物和事物之间的联系抽象到程序世界中。(对运算过程的抽象)
//面向过程编程
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
(1.)纯函数
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
*/
//不纯的
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))
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.)函数组合
函数组合
//函数组合
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
//函数组合要满足结合律
// 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中提供的组合函数
//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函数
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模块
//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
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
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' ]
为什么要学函子
前面介绍了一些函数式编程的基础,但是还没介绍在函数式编程过程中如何把副作用(副作用会使函数不纯,但是副作用又无法避免)控制在可控范围内、异常处理、异步操作等(通过函子来处理这些)
什么是函子
//*******函子(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
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' }
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函子
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 }
//测试--非法的输入
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函子
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
// 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函子
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 函子
class Container{
static of(value){
return new Container(value)
}
......
}
Container.of(2)
.map(x => x + 5)
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)