深入学习前端知识(LG)第一章函数式编程

学习目标：

为什么要学习函数编程以及什么是函数式编程
函数式编程的特性(纯函数、柯里化、函数组合等)
函数式编程的应用场景
函数式编程库 Lodash

学习内容：

1、函数可以作为参数、 - > 可以让函数更加的灵活
2、函数可以作为返回值。
3、常用的高阶函数
4、闭包 （可以在另一个作用域中调用一个函数内部函数，并访问该函数内部的成员）
5、纯函数 （相同的输入始终会得到相同的输出） -> loadsh
6、函数的柯里化 （当一个函数有多个参数时，先传递一部分参数调用它（这部分参数永恒不变），然后返回一个新的函数接收剩余的参数，返回结果）

学习产出：

1、函数可以作为参数
① function forEach (array, fn) {
for (let i = 0; i < array.length; i++) {
fn(array[i])
}
}

// 测试
let arr = [1, 3, 4, 7, 8]

forEach(arr, function (item) {
console.log(item)
})
②function filter (array, fn) {
let results = []
for (let i = 0; i < array.length; i++) {
if (fn(array[i])) {
results.push(array[i])
}
}
return results
}

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

console.log®
2、函数可以作为返回值
该方法只执行一次，
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象
https://www.runoob.com/w3cnote/js-call-apply-bind.html 为解释
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)

3、常用的高阶函数
①map 函数 -> map可以对数组中的任意值进行修改，返回一个新数组
// map
const map = (array, fn) => {
let results = []
for (let value of array) {
results.push(fn(value))
}
return results
}

// 测试
// let arr = [1, 2, 3, 4]
// arr = map(arr, v => v * v)
// console.log(arr)

②every 函数 -> 可以检测数组中的每一个元素是否都满足条件，返回boolean类型
const every = (array, fn) => {
let result = true
for (let value of array) {
result = fn(value)
if (!result) {
break
}
}
return result
}
// let arr = [9, 12, 14]
// let r = every(arr, v => v > 10)
// console.log®
③some 函数 - > 判断数组中是否有一个值满足条件，返回boolean
const some = (array, fn) => {
let result = false
for (let value of array) {
result = fn(value)
if (result) {
break
}
}
return result
}

// 测试
let arr = [1, 3, 5, 9]
let r = some(arr, v => v % 2 === 0)
console.log®

4、闭包
function makePower (power) {
return function (number) {
return Math.pow(number, power)
}
}

// 求平方
let power2 = makePower(2)
let power3 = makePower(3)

5、纯函数
// 纯函数和不纯的函数
// slice / splice

let array = [1, 2, 3, 4, 5]

// 纯函数
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))
console.log(array.slice(0, 3))

// 不纯的函数
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))
console.log(array.splice(0, 3))

// 纯函数
function getSum (n1, n2) {
return n1 + n2
}
console.log(getSum(1, 2))
console.log(getSum(1, 2))
console.log(getSum(1, 2))
6、函数的柯里化
let checkAge = min => (age => age >= min)

let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)

console.log(checkAge18(20))
console.log(checkAge18(24))