JavaScript 函数式编程

曼联的小黑熊
96 阅读8分钟

一、函数式编程基本概念

  • 函数式编程(Functional Programming, FP)，FP 是编程范式之一，常听说的编程范式还有面向过程编程、面向对象编程

  • 面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系

  • 函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）

    1. 函数式编程的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数
    2. x -> f(联系、映射) -> y，y=f(x)
    3. 函数式编程中的函数指的不是程序中的函数(方法)，而是数学中的函数即映射关系，例如：y= sin(x)，x和y的关系
    4. 相同的输入始终要得到相同的输出(纯函数)
    5. 函数式编程用来描述数据(函数)之间的映射
// 非函数式
let num1 = 2
let num2 = 3
let sum = num1 + num2
console.log(sum)

// 函数式
function add (n1, n2) {
    return n1 + n2
}
let sum = add(2, 3)
console.log(sum)

二、函数是一等公民

  • 函数是一等公民的含义就是，函数可以存储在变量中，函数作为参数，函数作为返回值
  • 在 JavaScript 中函数就是一个普通的对象 (可以通过 new Function() )，我们可以把函数存储到变量，数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function('alert(1)') 来构造一个新的函数

三、高阶函数

高阶函数 (Higher-order function)的特点就是把函数作为参数传递给另一个函数，或者把函数作为另一个函数的返回结果

3-1 函数作为参数

// 高阶函数-函数作为参数

// 手写 forEach
function forEach(array, fn) {
  for (let i = 0; i < array.length; i++) {
    fn(array[i])
  }
}

// 测试
let arr = [1, 3, 4, 7, 8]
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 arr = [1, 3, 4, 7, 8]
let r = filter(arr, function (item) {
  return item % 2 === 0
})

console.log(r)

3-2 函数作为返回值

// 高阶函数-函数作为返回值
// 本质就是通过一个函数去生成另外一个函数

function makeFn () {
  let msg = 'Hello function'
  return function () {
    console.log(msg)
  }
}

// const fn = makeFn()
// fn()
makeFn()()



// once 手写 （作用是让一个函数只能被执行一次）
function once(fn) {
  let done = false
  return function () {
    if (!done) {
      done = true
      return fn.apply(this, arguments)
    }
  }
}

let pay = once(function (money) {
  console.log(`支付: ${money} RMB`)
})

pay(5)
pay(5)
pay(5)
pay(5)

3-3 高阶函数的意义

  • 高阶函数可以帮助我们屏蔽细节，只需要关注我们的目标，高阶函数是用来抽象通用的问题
  • 常见的高阶函数有forEach、map、filter、every、some、find/findIndex、reduce、sort
// 模拟常用高阶函数：map、every、some

// map
const map = (array, fn) => {
  let results = []
  for (let value of array) {
    results.push(fn(value))
  }
  return results
}

// 测试
// let arr = [1, 2, 3, 4]
// arr = map(arr, v => v * v)
// console.log(arr)



// every
const every = (array, fn) => {
  let result = true
  for (let value of array) {
    result = fn(value)
    if (!result) {
      break
    }
  }
  return result
}


// 测试
// let arr = [9, 12, 14]
// let r = every(arr, v => v > 10)
// console.log(r)

// some
const some = (array, fn) => {
  let result = false
  for (let value of array) {
    result = fn(value)
    if (result) {
      break
    }
  }
  return result
}

// 测试
let arr = [1, 3, 5, 9]
let r = some(arr, v => v % 2 === 0)
console.log(r)

四、闭包

  • 函数和其周围的状态(词法环境)的引用捆绑在一起会形成闭包，导致可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员
  • 闭包的本质就是函数在执行的时候会放到一个执行栈上，当函数执行完毕之后会从执行栈上移除，但是作用域的成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员
  // 生成计算数字的多少次幂的函数
    function makePower(power) {
      return function (number) {
        return Math.pow(number, power)
      }
    }

    // 生成一个求平方的函数
    let power2 = makePower(2)
    // 生成一个求三次方的函数
    let power3 = makePower(3)

    console.log(power2(4))
    console.log(power2(5))
    console.log(power3(4))

五、纯函数

5-1 纯函数基本概念

  • 纯函数指的是相同的输入永远会得到相同的输出，而且没有任何可观察的副作用，就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)

  • lodash 就是一个典型纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法

  • 数组的 slice 和 splice 分别就是是纯函数和不纯的函数，因为 slice 返回数组中的指定部分，不会改变原数组，而 splice 对数组进行操作返回该数组，会改变原数组

  • 函数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的）

// 纯函数和不纯的函数
// slice / splice

let array = [1, 2, 3, 4, 5]

// 纯函数
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))

// 不纯的函数
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))

// 纯函数
function getSum(n1, n2) {
  return n1 + n2
}
console.log(getSum(1, 2))
console.log(getSum(1, 2))
console.log(getSum(1, 2))

5-2 纯函数的好处

  1. 可缓存，因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来
// 记忆函数 memoize
const _ = require('lodash')

function getArea(r) {
  console.log(r)
  return Math.PI * r * r
}

// memoize 主要是将传进来的纯函数生成一个记忆函数，将每次处理的结果缓存起来，如果下一次再有相同的输入，就直接使用缓存的结果，无需再调用纯函数
let getAreaWithMemory = _.memoize(getArea)
console.log(getAreaWithMemory(4)) // 第一次执行 打印 4 50.26548245743669
console.log(getAreaWithMemory(4)) // 第二次执行 没有打印 4 ，因为根本没有去调用 getArea 函数，是直接从缓存中获取到圆的面积，之际打印出来
console.log(getAreaWithMemory(4)) // 第三次执行 没有打印 4 ，


// 模拟 memoize 方法的实现

function memoize(f) {
  let cache = {} // 存储执行结果
  return function () {
    let key = JSON.stringify(arguments) // 将 getAreaWithMemory 的参数作为 cache 的键
    cache[key] = cache[key] || f.apply(f, arguments)
    return cache[key]
  }
}

let getAreaWithMemory = memoize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
  1. 纯函数更加方便测试
  2. 在多线程环境下并行操作共享的内存数据很可能会出现意外情况，而纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (Web Worker)

5-3 副作用

  • 纯函数指的是对于相同的输入永远会得到相同的输出，而且没有任何可观察的副作用，所以说副作用就会让函数变得不纯，如果函数依赖于外部的状态就无法保证输出相同，就会带来副作用

  • 副作用的来源有很多，包括配置文件，数据库，用户的输入......所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制它们在可控范围内发生

六、函数柯里化

6-1 柯里化基本概念

柯里化指的是当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变），然后返回一个新的函数接收剩余的参数，返回结果，本质上就是使用了闭包和高阶函数

// 柯里化演示

function checkAge(age) {
    let min = 18 // 硬编码
    return age >= min
}

// 普通的纯函数
function checkAge(min, age) {
    return age >= min
}

console.log(checkAge(18, 20))
console.log(checkAge(18, 24))
console.log(checkAge(22, 24))


// 函数的柯里化
function checkAge(min) {
    return function (age) {
        return age >= min
    }
}

// ES6 实现函数柯里化
let checkAge = min => (age => age >= min)

let checkAge18 = checkAge(18) // checkAge18 是一个只用来判断是否大于18岁的函数
let checkAge20 = checkAge(20) // checkAge20 是一个只用来判断是否大于20岁的函数

console.log(checkAge18(20))
console.log(checkAge18(24))

6-2 lodash 中的柯里化函数

_.curry(func)
功能：创建一个函数，该函数接收一个或多个 func 的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数
参数：需要柯里化的函数
返回值：柯里化后的函数

// lodash 中的 curry 基本使用 
const _ = require('lodash')

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

const curried = _.curry(getSum)
console.log(curried(1, 2, 3)) // 如果传递了全部参数，就会直接调用
console.log(curried(1)(2, 3)) // 如果只传递一个参数，就会返回一个函数，等待去接收剩下的两个参数
console.log(curried(1, 2)(3))

// 柯里化案例
// ''.match(/\s+/g)
// ''.match(/\d+/g)

const _ = require('lodash')

const match = _.curry(function (reg, str) {
  return str.match(reg)
})

const haveSpace = match(/\s+/g)  // 提取字符串所有空白字符
const haveNumber = match(/\d+/g) // 提取字符串中所有数字

console.log(haveSpace('hello world')) // ['']
console.log(haveSpace('helloworld')) // null

console.log(haveNumber('1a2b3c')) // [ '1', '2', '3' ]
console.log(haveNumber('abc')) // null



const filter = _.curry(function (func, array) {
  return array.filter(func)
})

const findSpace = filter(haveSpace) // 提取数组中具有空白字符的元素

console.log(filter(haveSpace, ['John Connor', 'John_Donne'])) // [ 'John Connor' ]
console.log(findSpace(['John Connor', 'John_Donne'])) // [ 'John Connor' ]

6-3 实现 lodash 中的 curry 方法

// 模拟实现 lodash 中的 curry 方法

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

const curried = curry(getSum) // curried 就是柯里化之后的函数

console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))


function curry(func) {
  return function curriedFn(...args) {
    // 判断实参和形参的个数 ，func.length 是 getSum 形参的个数
    if (args.length < func.length) {
      return function () {
        return curriedFn(...args.concat(Array.from(arguments)))
      }
    }
    return func(...args)
  }
}

6-4 柯里化总结

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

七、函数组合

7-1 函数组合基本概念

  • 纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))，但是函数组合可以让我们把细粒度的函数重新组合生成一个新的函数

  • 如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数，函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果

  • 函数组合默认是从右到左执行

// 函数组合演示

// 获取数组最后一项
function compose(f, g) {
  return function (value) {
    return f(g(value)) // 函数组合是有顺序的，默认是从右到左执行，先执行函数g，再执行函数f
  }
}

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

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

const last = compose(first, reverse) // 组合成新的函数

console.log(last([1, 2, 3, 4])) // 4

7-2 lodash 中的组合函数

  • 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 f = _.flowRight(toUpper, first, reverse) // 将数组最后一项改成大写

console.log(f(['one', 'two', 'three'])) // THREE

7-3 实现 lodash 的 flowRight()

// 模拟 lodash 中的 flowRight

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

// 普通函数写法
function compose(...args) {
    return function (value) {
        return args.reverse().reduce(function (acc, fn) { // acc 是累积的结果，fn 是遍历 args.reverse() 数组的每一项
            return fn(acc)
        }, value)
    }
}

// 箭头函数写法
const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)

const f = compose(toUpper, first, reverse)

console.log(f(['one', 'two', 'three']))

7-4 函数组合的结合律

函数组合是要满足结合律的，比如let f = compose(f, g, h)，既可以把 g 和 h 组合，还可以把 f 和 g 组合，结果都是一样的，所以下述的三个函数都是等价的

// 函数组合要满足结合律
const _ = require('lodash')

const f = _.flowRight(_.toUpper, _.first, _.reverse)
const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))


console.log(f(['one', 'two', 'three']))
avatar
文章
阅读
粉丝