「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
TIP 👉 廿三糖瓜儿粘;廿四扫房日;廿五糊窗户;廿六炖猪肉;廿七杀公鸡;廿八把面发;廿九蒸馒头;卅晚上熬一宿;大年初一扭一扭。
前言
函数式编程的历史已经很悠久了，但是最近几年却频繁的出现在大众的视野，接下来我们详细介绍一下函数式编程。-
为什么要学习函数编程以及什么是函数式编程
-
函数式编程的特性(纯函数、柯里化、函数组合等)
-
函数式编程的应用场景
为什么要学习函数式编程
函数式编程是非常古老的一个概念，早于第一台计算机的诞生，函数式编程的历史。那我们为什么现在还要学函数式编程？
-
函数式编程是随着 React 的流行受到越来越多的关注
-
Vue 3也开始拥抱函数式编程函数式编程可以抛弃 this
-
打包过程中可以更好的利用 tree shaking 过滤无用代码
-
方便测试、方便并行处理
-
有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda
什么是函数式编程
函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。
-
面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系
-
函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）
-
程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数
-
x -> f(联系、映射) -> y，y=f(x)
-
函数式编程中的函数指的不是程序中的函数(方法) ，而是数学中的函数即映射关系，例如：y=sin(x) ，x和y的关系
-
相同的输入始终要得到相同的输出**(纯函数)
-
函数式编程用来描述数据(函数)之间的映射
函数是一等公民
-
函数可以存储在变量中函数作为参数
-
函数作为返回值
在 JavaScript 中**函数就是一个普通的对象(可以通过 new Function() )，我们可以把函数存储到变量/数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过来构造一个新的函数。
- 把函数赋值给变量
// 把函数赋值给变量
let fn = function () {
console.log('Hello First-class Function')
}
fn()
// 一个示例
const BlogController = {
index (posts) { return Views.index(posts) },
show (post) { return Views.show(post) },
create (attrs) { return Db.create(attrs) },
update (post, attrs) { return Db.update(post, attrs) },
destroy (post) { return Db.destroy(post) }
}
// 优化
const BlogController = {
index: Views.index,
show: Views.show,
create: Db.create,
update: Db.update,
destroy: Db.destroy
}
函数是一等公民是我们后面要学习的高阶函数、柯里化等的基础。
高阶函数
什么是高阶函数
- 高阶函数 (Higher-order function)
- 可以把函数作为参数传递给另一个函数
- 可以把函数作为另一个函数的返回结果
- 函数作为参数
// forEach
function forEach (array, fn) {
for (let i = 0; i < array.length; i++) { fn(array[i])
}
}
- 函数作为返回值
function makeFn () {
let msg = 'Hello function' return function () {
console.log(msg)
}
}
const fn = makeFn()
fn()
// once
function once (fn) {
let done = false
return function () {
if (!done) {
done = truereturn
fn.apply(this, arguments)
}
}
}
let pay = once(function (money) {
console.log(`支付：${money} RMB`)
})
// 只会支付一次
pay(5)
pay(5)
pay(5)
使用高阶函数的意义
- 抽象可以帮我们屏蔽细节，只需要关注与我们的目标
- 高阶函数是用来抽象通用的问题
// 高阶高阶函数
let array = [1, 2, 3, 4]
forEach(array, item => {
console.log(item)
})
let r = filter(array, item => {
return item % 2 === 0
})
常用高阶函数
- forEach
- map
- filter
- every
- some
- find/findIndex
- reduce
- sort
const map = (array, fn) => {
let results = []
for (const value of array) {
results.push(fn(value))
}
return results
}
const every = (array, fn) => {
let result = true
for (const value of array) {
result = fn(value)
if (!result) {
break
}
}
return result
}
const some = (array, fn) => {
let result = false
for (const value of array) {
result = fn(value)
if (result) {
break
}
}
return result
}
「欢迎在评论区讨论」
