前端学习之函数式编程—纯函数

Posted 2021-09-01 萌萌的DDD

Part 01 纯函数概念

纯函数:相同的输入永远会得到相同的输出,而且没有任何可观察的副作用

• 纯函数就类似数学中的函数,用来描述输入与输出之间的关系,例如:y=f(x)

---

Part 02 案例:slice和splice函数 

数组的slice 和 splice 分别是 纯函数 和 不纯的函数

• splice 返回数组中的指定部分,不会改变原数组
• splice 对数组进行操作,返回该数组,会改变原数组

 

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


let arr = [1, 2, 3, 4]

// 纯函数 多次调用返回相同内容
console.log(arr.slice(0, 2)); //[ 1, 2 ]
console.log(arr.slice(0, 2)); //[ 1, 2 ]
console.log(arr.slice(0, 2)); //[ 1, 2 ]

// 不纯函数 splice 会修改原数组  因此多次调用返回的结果不相同

console.log(arr.splice(0, 2)); //[ 1, 2 ]
console.log(arr.splice(0, 2)); //[ 3, 4 ]
console.log(arr.splice(0, 2)); //[]

// 纯函数案例

function getSum(num1, num2) {
    return num1 + num2
}

console.log(getSum(1, 2)); // 3
console.log(getSum(1, 2)); // 3
console.log(getSum(1, 2)); // 3

根据相同的输入,始终获得了相同的输出,因此称为纯函数

• 函数式编程不会保留计算中间的结果,所以变量是不可变的
• 我们可以把一个函数的执行结果交给另一个函数去处理

---

Part 03  Lodash 一致性、模块化、高性能的 javascript 工具库

安装lodash

//安装 lodash (node 方法)
const _ = require('lodash');
const _ = require('lodash/core');
const fp = require('lodash/fp');
const array = require('lodash/array');
const object = require('lodash/fp/object');
const at = require('lodash/at');
const curryN = require('lodash/fp/curryN');

// 安装lodash (npm)

// npm init -y
// npm i lodash

const arr = ['jack', 'tony', 'ethen', 'soap']

console.log(_.first(arr)); // jack
console.log(_.last(arr)); // soap
console.log(_.toUpper(_.first(arr))); // JACK
console.log(_.reverse(arr)); //[ 'soap', 'ethen', 'tony', 'jack' ]
const r = _.each(arr, (item, index, arr) => {
    console.log(item);
})
console.log(r); //['jack', 'tony', 'ethen', 'soap'] 数组本身

---

Part 04 纯函数的优势

1. 可缓存 

        因为纯函数对相同的输入始终有相同的结果,所以可以把函数的结果缓存起来

        如果结果值相同,多次调用只会执行一次,但仍然会获取值

// 记忆函数
const _ = require('lodash');

function getAxios(params) {
    console.log(params);
    return params * 10 * 10 * 10 * 10
}

const getAreaWithMemory = _.memoize(getAxios)
console.log(getAreaWithMemory(4)); 
console.log(getAreaWithMemory(4));
console.log(getAreaWithMemory(5));
console.log(getAreaWithMemory(5));

// 模拟 memoize 方法的实现

function memoize(fn) {
    let cache = {}
    return function() {
        let key = JSON.stringify(arguments)
        cache[key] = cache[key] || f.apply(f, arguments)
        return cache[key]
    }
}

 2.可测试

        纯函数让测试更方便(单元测试)

3.并行处理

•   在多线程环境下并行操作共享的内存数据很可能会出现意外的情况\\
•   纯函数不需要访问共享的内存数据,所以在并行环境下可以任意运行纯函数(webWorker)

---

Part 05 副作用

// 不纯函数

let mini = 18 

function checkAge(age){
    return age >= mini
}

当函数如果依赖外部的变量或状态,就无法保障输出相同的结果,如果外部变量被修改,则会带来副作用

副作用来源:"

• 配置文件
• 数据库
• 用户的输入
• 等等