Part 1 . JavaScript 深度剖析－纯函数

最新推荐文章于 2022-09-26 20:32:09 发布

ling10086

最新推荐文章于 2022-09-26 20:32:09 发布

阅读量106

点赞数 1

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wanglingling071008/article/details/110224022

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

纯函数

纯函数的概念

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

// 演示：纯函数和不纯的函数

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

// 纯函数：相同的输入永远会得到相同的输出
// slice: 返回数组中的指定部分，不会改变原数组
// 用途：截取数组中的指定部分
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))

// 不纯的函数：相同的输入得到不同的输出
// splice: 对数组进行操作返回该数组，会改变原数组
// 用途：截取数组的指定部分后，能修改、删除原数组
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))

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

// 演示 lodash
// lodash FP 模块中定义的函数才是纯函数
// first / last / toUpper / reverse / each
const _ = require('lodash')

const array = ['jack', 'tom', 'lucy', 'kate']

console.log(_.first(array))
console.log(_.last(array))

console.log(_.toUpper(_.first(array)))

// 数组的reverse()不是纯函数，因为它没有参数，纯函数要求是相同的输入得到相同的输出，要有参数
// lodash 中的reverse方法，在内部实现用到了数组中的reverse()，会改变原有的函数，不是纯函数
console.log(_.reverse(array))

const r = _.each(array, (item, index) => {
  console.log(item, index)
})
// _.each方法返回的就是数组本身
console.log(r)

纯函数的好处

可缓存：因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来，从而提高程序的性能

// 记忆函数 memoize: 使 getArea 纯函数多次调用，只执行一次
const _ = require('lodash')
function getArea (r) {
  console.log(r)
  return Math.PI * r * r
}
let getAreaWithMemory = _.memoize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))


// 模拟 memoize 方法的实现
function memoize (f) {
  // cache 对象存储中间结果，f 函数的参数作为对象的“键”，f 函数的执行结果作为对象的“值”
  let cache = {}
  // 对 getAreaWithMemory 的调用最终是调用这里返回的函数，需要将此函数的参数传递给 f
  return function () {
	// 获取此函数的参数，arguments 是伪数组->转换为字符串，来作为对象的“键”
    let key = JSON.stringify(arguments)
    // apply 方法可以改变函数内部的 this，但这里不需要，只要将参数传递到 f 就行 
    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))

为什么需要对结果进行缓存？如果一个函数执行起来特别耗时，然后又需要多次调用，这样每次调用都需要等一段时间才能得到结果，对性能有影响。为了提升性能，可以在这个函数第一次执行完毕时就把结果缓存起来，这样后面再调用就直接从缓存中获取结果

可测试：纯函数让测试更方便
- 为什么方便测试？因为纯函数始终有输入和输出，而单元测试就是在断言一个函数的结果，所以所有纯函数都是可以测试的函数
方便并行处理
- 在多线程环境下并行操作共享的内在数据很可能会出现意外情况，如：全局变量，多个线程同时去修改一个变量，那这个变量的结果是不确定的
- 纯函数是一个封闭的空间，它不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数（JavaScript 是单线程的，而 ES6+ 新增的 Web Worker 是支持多线程的）

副作用

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

// 不纯
let min = 18
function checkAge (age) {
  return age >= min
}
// 纯函数（存在硬编码，可以通过柯里化来解决）
function checkAge (age) {
  let min = 18
  return age >= min
}