函数式编码范式
为什么要学函数式编程
- 函数式编程是随着react的流行收到越来越多的关注
- vue3也开始拥抱函数式编程
- 函数式编程可以抛弃this
- 打包过程可以更好的利用tree shaking 过滤无用代码
- 方便测试、方便并行处理
- 有很多库可以帮助我们进行函数式开发：lodash 、underscore、ramdo
什么是函数式编程
- 函数式编程类似数学中的映射关系 例如 x=sin(x)
- （纯函数）相同的输入始终有相同的结果
- 有输入 有输出 而且相同的输入要有相同的输出
函数是一等公民
MDN First-class Function
- 函数可以存储在变量中
- 函数作为参数
- 函数作为返回值
在javascript中 函数就是一个 普通的对象
高阶函数
什么是高阶函数
-
高阶函数
- 可以把函数作为参数传递给另一个函数
- 可以把函数作为另一个函数的返回值
-
函数作为参数
function forEach(array,fn){
for(let i=0;i<array.length;i++){
fn(array[i])
}
}
let arr=[1,2,3]
function fn(item){
console.log(item)
}
console.log(forEach(arr,fn))
- 函数作为返回值
function once(fn){
let done=false;
if(!done){
done= true;
return fn.apply(this,arguments)
}
}
let sleep=once(function(lazy){
console.log(`睡了${lazy}觉`)
})
sleep(2)
sleep(2)
使用高阶函数的意义
- 抽象可以帮我们屏蔽细节，只需要关注我们的结果（目标)
- 高阶函数是用来抽象通用的问题
例如
filter splice forEach 这种 我们只需要知道 返回的结果就行 不需要具体关注内部怎么实现
常用的高级函数
- forEach
- map
- filter
- every
- some
- find/findIndex
- reduce
- sort
- reverse
//手写一个map
const maMap=(array,fn)=>{
let result=[];
for(let i=0;i<array.length;i++){
result.push(fn(array[i]))
}
return result;
};
let arr=[1,2,3,4,5];
arr=myMap(arr,(item)=>item*2)
闭包
-
闭包（Closure)：函数和其周围的状态（词法环境）的引用捆绑在一起形成闭包。
- 简单来说就是一个函数里面包含着另一个函数
- 可以在一个作用域中调用另一个函数内部的函数 并 访问到该函数的作用域中的成员。
function add(){
let sum=3;
return function(){
console.log(sum)
}
}
//如果在return 的函数中没有使用到sum ，sum就会别释放掉
//如果用到了 就不会被释放回收
const fn=add();
fn()
- 闭包的本质：函数在执行的时候会放到一个执行栈上，当函数执行完毕之后 会从执行栈中移除；但是堆栈上的作用域成员因为被外部引用不能释放，所以依然能被内部成员所访问到。
\
