关于前端:深入理解JavaScript函数式编程

46次阅读

共计 5759 个字符，预计需要花费 15 分钟才能阅读完成。

在讲函数式组件之前，笔者有必要申明一下，笔者对函数式编程知之甚少，此篇文章全是因为函数式编程在当今前端开发较为风行，所以才要去学习 Orz。像 ES6 中的箭头函数，Redux 中的 compose，React 16.6 之后的 React.memo()，16.8 之后的 Hooks，应用函数式组件成为支流（天然，Vue3 中也有 composition API 等）

因为咱们应用的各种框架，越来越偏差于函数式开发，所以为了看懂、应用这些代码，咱们有必要学习函数式编程

写代码时，不同的写法造成不同的门派，支流的编程范式有两种，即命令式编程（Imperative programming）和申明式编程（Declarative programming）

当然还有像事件驱动编程等，此处不讲

在命令式编程语言中个别反对四种根本语句：

运算语句
循环语句（for、while）
条件分支语句（if else、switch）
无条件分支语句（return、break、continue）

它关注的过程，所以也被称为过程化编程，与之对应的是申明式编程

命令式编程通知计算机如何计算、关怀解决问题的步骤
申明式编程通知计算机须要计算什么，关怀解决问题的指标

两种编程形式在 JavaScript 均有开花，在以往的开发中（即 React、Vue 等未呈现前），咱们习惯应用命令式编程，其中的代表就是面向对象编程，即通过对象、类、继承、封装等个性实现面向对象编程，风行的库是 jquery

即便当初不那么风行，但 JavaScript 是始终反对申明式编程的，即通过函数式编程来实现，其起因是函数是一等公民，它能作为参数和返回值。风行的库是 underscorejs、lodash

柯里化（Currying）、缓存函数、纯函数、函数组合（compose）、不可变数据、高阶函数

咱们顺次讲讲这几个特点

柯里化是把承受多个参数的函数变换成承受一个繁多参数（最后函数的第一个参数）的函数，并且返回承受余下的参数而且返回后果的新函数的技术

——wiki

也就是说，柯里化是一种函数的转换，它是将一个函数从 f(a, b, c) 的写法转换为 f(a)(b)(c)

艰深来讲：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。它不会调用函数，只是对函数进行转换

// 柯里化之前
function add(x, y) {return x + y;}

add(1, 2); // 3

// 柯里化之后
function add(y) {return function (x) {return x + y;};
}
// ES6 箭头函数示意
const add = x => y => x + y;

add(2)(1);

如上案例，咱们就是将 add(1, 2) 转换为了 add(2)(1)，当然，此案例是模仿柯里化，一般来说，咱们会写个「转换函数」将函数适配成柯里化型函数

const curryAdd = curry(add)
console.log(curryAdd(1)(2)) // 3

那么如何实现 curry 呢？须要满足两点

判断以后函数传入的参数是否大于或等于 fn 须要参数的数量，如果是，间接执行 fn
如果传入参数数量不够，返回一个闭包，暂存传入的参数，并从新返回 curry 函数

const curry = (fn, ...args) => {if (args.length >= fn.length) {return fn(...args)
    } else {return (...args2) => curry(fn, ...args, ...args2)
    }
}

咱们来一个简略的实例验证一下：

function fun(a, b, c) {return a + b + c;}
const curryFun = curry(fun);
curryingFun(1)(2)(3); // 6
curryingFun(1, 2)(4); // 7
curryingFun(1, 2, 5); // 8

翻看函数式编程概念的两个库：undersore.js 及 lodash 中各自实现的 curry

undersore.js
lodash

在下面的例子中，咱们频繁应用箭头函数，箭头函数的魅力之一是它合乎函数式编程的思维，例如：

function add(y) {return function (x) {return x + y;};
}
const add = x => y => x + y;

// redux 中的 compose 函数
const compose = (...func) => {if (func.length === 0) {return args => args}
    if (func.length === 1) {return func[0]
    }
    return func.reduce((a,b) => (...args) => a(b(...args)))
}

function enhancer(originF) {return function (...args) {console.log('before');
        const result = originF(...args);
        console.log('after');
        return result;
    };
}
// 等于
const enhancer =
    (originF) =>
    (...args) => {console.log('before');
        const result = originF(...args);
        console.log('after');
        return result;
    };

// 三数之乘
const multi = a => b => c => a * b * c

笔者认为，柯里化就是利用了闭包的个性，将参数存着，到了要应用的时候再开释，而这正式柯里化的利用之一

在开发中，咱们会遇到这种状况，开发了一个工具函数，在调用时，会应用一个频繁的参数，而如果将这个参数提取进去，就能优化代码，如

function add(a, b) {return a + b}

add(10, 1) // 11
add(10, 11) // 21
add(10, 111) // 121

如果咱们柯里化，将第一个参数 10 内置进函数中，代码就能清晰明了

// 最简略的优化
functon add10(b) {return add(10, b)
} 

add10(1) // 11
add10(11) // 21
add10(111) // 121

函数 add10 就是通过了柯里化的函数，就像咱们上文所讲，个别用个包装函数将其适配成柯里化型函数，这里咱们调用上文的 curry 函数

// 完整版
function add(a, b) {return a + b;}
// 柯里化包装函数
const curry = (fn, ...args) => {if (args.length >= fn.length) {return fn(...args)
    } else {return (...args2) => curry(fn, ...args, ...args2)
    }
}

const add10 = curry(add, 10)

add10(1) // 11
add10(11) // 21
add10(111) // 121

缓存函数就是将函数返回值缓存起来的办法。与柯里化相比，它仿佛更简略。例如

function add(a, b) {return a + b;}
let memoAdd = memoize(add)
memoAdd(1, 2) // 3
memoAdd(1, 3) // 雷同的参数，第二次调用时，从缓存中取出数据

如何实现呢？

其实很简略，就是用闭包存在内存中。如果统一，就返回，不统一就存在对象中，再返回

const memoize = (func) => {let cache = {}
    return function(key) {if (!cache[key]) {cache[key] = func.apply(this, arguments)
        }
        return cache[key]
    }
}

笔者认为纯函数就相似数学中的函数，例如 y = f(x)，更具体点就是：y=2x，雷同的输出，就有雷同的输入，在执行过程中不会产生副作用

所有它有两个特点：

不扭转原数据（没有副作用）
返回一个新数据

const arr = [1, 2, 3]
// 纯函数
arr.slice(1)
console.log(arr) // [1, 2, 3]
// 产生副作用，非纯函数
arr.splice(1)
console.log(arr) // [1]

数组：slice、concat、map、reduce、filter

slice、concat 咱们在拷贝的机密已经讲过，是浅拷贝的办法

map、filter 是 ES6 新增的 API

字符串：String 类型及其他的根本类型的 API 都是不可变的，它们的每个 API 都是纯函数，不会扭转原数据

var str = "hello"
console.log(str.slice(0, 3)) // hel , slice 在 String 类型中同样实用，console.log(str) // hello
console.log(str.substr(0, 3)) // hel
console.log(str) // hello
console.log(str.substring(0,3)); // hel
console.log(str) // hello
// 其余的 API 也是如此

就是将多个函数顺次执行，将这些函数组合起来，主动顺次执行，这一过程就是函数组合

这么做的目标是为了让代码更加简略且具备可读性

function double(num) {return num * 2}

function square(num) {return num ** 2}
// 一般做法
const res = square(double(10))
console.log(res) // 400

// 函数组合
function composeFn(fn1, fn2) {return function (count) {return fn2(fn1(count))
    }
}

const newFn = composeFn(double, square)
const res2 = newFn(20) // 1600

看看 underscore 的 compose 函数

function compose() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while(i--) result = args[i].call(this, result);
        return result;
    }
}

看到 compose 是否很相熟，redux 中的源码是这样写的

function compose(...funcs) {if (funcs.length === 0) {return arg => arg}
    if(funcs.length === 1) {return funcs[0]
    }
    return funcs.reduce((a,b) => (...args) => a(b(...args)))
}

如果在理论开发中，就能够用这一概念解决洋葱代码

fn3(fn2(fn1(fn0(x)))) // 洋葱代码
var result = compose(f3, f2, f1, f0) // 函数组合代码
result(x)

简略来说，高阶函数就是一个返回另一个函数的函数

function sayHello() {return function() {console.log("hello")
    }
}

其本质是因为函数是一等公民，满足作为参数或者返回值

其 React 中也有高阶组件的概念，其原理都一样，行将组件当作参数传入，返回另一个组件

不可变数据结构式函数式编程中的基本准则

JavaScript 的对象是可变的，起因是为了节约内存，但也同样带来了副作用，当应用程序简单后，保护代码难度会加深

咱们在拷贝的机密中已经讲过，根本类型的数据是不可变的，因为它们存在栈内存，而援用类型（即对象）的数据是可变的，它存在堆内存，当赋值时，拷贝的时它的援用地址

所以咱们在赋值时会依据状况应用浅拷贝、深拷贝来实现

在 React 开发时，咱们会用 immutable.js、immer 对数据进行不可变

咱们不论其余的，单单就函数式编程在前端方面有哪些用处？如在 Koa 中的洋葱模型、redux 中的 compose 函数就是函数组合，React 开发时的 HOC 高阶组件就采纳了高阶函数，以及它（React）为了让数据放弃唯一性，而能够援用不可变数据库（immutable.js、immer）是函数式编程的个性——不可变数据

当然，这些只是笔者对函数式编程肤浅的认知，其内容当然不知以上说的几点，还有惰性函数、函子等知识点，以及其余语言中的函数式编程，待笔者等级晋升后再来战

扼要 JavaScript 函数式编程 - 入门篇
函数式编程思维
浅析 JavaScript 函数式编程
函数式编程（FP）
前端开发 js 函数式编程实在用处体现在哪里？
JavaScript 专题之函数组合

深刻了解 JavaScript——开篇
深刻了解 JavaScript——JavaScript 是什么
深刻了解 JavaScript——JavaScript 由什么组成
深刻了解 JavaScript——所有皆对象
深刻了解 JavaScript——Object（对象）
深刻了解 JavaScript——new 做了什么
深刻了解 JavaScript——Object.create
深刻了解 JavaScript——拷贝的机密
深刻了解 JavaScript——原型
深刻了解 JavaScript——继承
深刻了解 JavaScript——JavaScript 中的始皇
深刻了解 JavaScript——instanceof——找祖籍
深刻了解 JavaScript——Function
深刻了解 JavaScript——作用域
深刻了解 JavaScript——this 关键字
深刻了解 JavaScript——call、apply、bind 三大将
深刻了解 JavaScript——立刻执行函数（IIFE）
深刻了解 JavaScript——词法环境
深刻了解 JavaScript——执行上下文与调用栈
深刻了解 JavaScript——作用域 VS 执行上下文
深刻了解 JavaScript——闭包
深刻了解 JavaScript——防抖与节流

正文完

前端

发表至：前端

2022-10-20

0

关于前端:React-Hook-必-学-的-9-个-钩子

关于前端:解决vue数据刷新后若设置overflowscroll下拉进度条仍停留在上次位置问题

关于前端:react基础

关于前端:今天在网站上了解了一下ES6的class的用法大概练习了下做个笔记

关于数据库:技术内幕-StarRocks-Pipeline-执行框架下

关于前端:深入理解JavaScript函数式编程

前言

什么是函数式编程

函数式编程有哪些特点

柯里化

什么是柯里化

箭头函数的应用

柯里化的利用

缓存函数

纯函数

JavaScript 中的哪些 API 是纯函数

函数组合（compose）

高阶函数

不可变数据

总结

参考资料

系列文章

Just My Socks（注册教程内含优惠码）

关于前端:深入理解JavaScript函数式编程

前言

什么是函数式编程

函数式编程有哪些特点

柯里化

什么是柯里化

箭头函数的应用

柯里化的利用

缓存函数

纯函数

JavaScript 中的哪些 API 是纯函数

函数组合（compose）

高阶函数

不可变数据

总结

参考资料

系列文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）