[JavaScript知识库]函数式编码范式

函数式编码范式

为什么要学函数式编程

• 函数式编程是随着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()

• 闭包的本质：函数在执行的时候会放到一个执行栈上，当函数执行完毕之后 会从执行栈中移除；但是堆栈上的作用域成员因为被外部引用不能释放，所以依然能被内部成员所访问到。