函数式编程是前端js基础！

react , vue3 等都大量使用函数式编程。

什么是函数式编程？

函数式编程（FP），是编程范式之一，常见的还有 面向过程编程，面向对象编程

面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装，继承，多态来演示事物之间的联系。

函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）。

相同的输入始终得到相同的输出

总结：函数式编程用来描述数据之间的映射。

// 非函数式
let num1 = 2
let num2 = 3
let sum = num1 + num2
// 函数式
function add (n1, n2) {
	return n1 + n2
}
let sum = add(2, 3)
console.log(sum)

函数是一等公民

函数式编程前置知识：

• 函数是一等公民
• 高阶函数
• 闭包

函数是一等公民：

• 函数可以存储在变量中
• 函数作为参数
• 函数作为返回值

在js中函数就是一个普通的对象，我们可以把函数存储在变量/数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function() 来构造一个新函数

高阶函数

定义：

• 可以把函数作为参数传递给另一个函数
• 可以把函数作为另一个函数的返回结果

// 高阶函数-函数作为参数
function forEach(arr, fn) {
  for (let index = 0; index < arr.length; index++) {
    fn(arr[index])
  }
}

// 测试
let arr = [1,2,3,4,5,6,7,8]
forEach(arr, function(item) {
  console.log(item)
})

// filter
function filter(arr, fn){
  let results = []
  for (let index = 0; index < arr.length; index++) {
    if(fn(arr[index])){
      results.push(arr[index])
    }
  }
  return results
}

let arr = [1,2,3,4,5,6,7,8]
let r = filter(arr, function(item){
  return item % 2 === 0
})

函数作为返回值

// 高阶函数-函数作为返回值
function makeFn() {
  let msg = 'Hello function'
  return function() {
    console.log(msg)
  }
}

const fn = makeFn()
fn()

makeFn()()

// once
function once (fn) {
  let done = false
  return function () {
    if(!done){
      done = true
      return fn.apply(this, arguments)
    }
  }
}

let pay = once(function (money) {
  console.log(`支付： ${money} RMB`)
})

pay(5)
pay(5)
pay(5)
pay(5)
pay(5)

高阶函数的意义：

抽象可以帮我们屏蔽细节，只需关注与我们的目标

高阶函数用来抽象通用问题

常用的高阶函数：

forEach,map,filter,every,some,find/findIndex,reduce,sort

const map = (arr, fn) => {
  let results = []
  for (const iterator of arr) {
    results.push(fn(iterator))
  }
  return results
}

// 测试
let arr = [1,2,3,4,5,6]
arr = map(arr, function(item){
  item => item * item
})
console.log(arr)


// every
const every = (arr, fn) => {
  let result = true
  for (const iterator of arr) {
    result = fn(iterator)
    if(!result){
      break
    }
  }
  return result
}

// some
const some = (arr, fn) => {
  let result = false
  for (const iterator of arr) {
    result = fn(iterator)
    if(result){
      break
    }
  }
  return result
}

闭包

函数和其周围的状态（词法环境）的引用捆绑在一起形成闭包。

可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员

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