一、函数式编程定义
“函数式编程”是一种编程范式，也就是如何编写程序的方法论。主要思想是把运算过程尽量写成一系列嵌套的函数调用。即函数式编程要求使用函数，把运算过程定义为不同的函数。
二、函数式编程特性
- 无副作用
- 不可变数据
- 纯函数
- 函数组合
- 函数柯里化
三、看个栗子
计算若干个数之和：
function add(x, y) {
return x + y;
}
function Reduce(...args) {
// 返回值
return args.reduce(add);
}
console.log(Reduce(1,2,3));
计算若干数之间的乘积：
function mul(x, y) {
return x * y;
}
function Reduce(...args) {
// 返回值
return args.reduce(mul);
}
console.log(Reduce(1,2,3));
若干个数组的拼接：
function concat(x, y) {
return x.concat(y);
}
function Reduce(...args) {
// 返回值
return args.reduce(concat);
}
console.log(Reduce([1,2],[5,6]));
可以看到，如果我们还有更多类似函数，我们还得对 Reduce 函数进行改写。
至此，我们完全可以一次性抽取出一个通用的版本 Reduce ：
function Reduce(fn) {
return function (...args){
return args.reduce(fn.bind(this));
}
}
let add = Reduce((x, y) => x + y);
// wrong: let add = iterative((x, y) =>{ x + y});
console.log(add(1,2,3));
通过向 Reduce 方法中传递一个特定功能的函数，来返回一个具备增强能力的新函数。这样我们可以像操作数据那样操作一组函数，使得这些函数具备某些新的能力。
这就是过程抽象的基本思想。这些变换函数的函数我们称之为“高阶函数”（它们自身输入函数或返回函数）。
四、过程抽象的具体应用
- 控制函数调用的频率
- 只调用一次的情况 （exp: 触发点击事件的回调函数限制其只调用一次）
function once(fn) {
return function (...args) {
if(fn) {
let res = fn.apply(this, args);
fn = null;
return res;
}
}
}
function foo(idx) {
console.log(idx);
}
foo(1);
foo(2);
foo(3);
let foo = once(foo);
foo(11);
foo(22);
foo(33);
场景代码：https://code.h5jun.com/buzi/2/edit?html,js,output
- 每隔一定的时间触发函数的执行；
节流：常用来防止按钮被重复点击，防止 resize、scroll 和 mousemove 事件过于频繁地触发等。
这种方式也可避免定义全局的定时器变量，不会污染该变量。
function throttle(fn, wait=500) {
let timer;
return function (...args) {
if(timer == null) { // undefined == null // true undefined === null //false 这里不要写成 严格相等 不然永远执行不进去
timer = setTimeout(() => timer = null, wait)
return fn.apply(this, args);
}
}
}
//限制button在500ms内只能被点击一次:
//快速连续不停的点击，按钮只会有规律的每500ms点击有效
button.addEventListener('click', throttle(() => {
console.log('hhh')
}))
// function once(fn) {
// fn = null; 不会改变外部的实参
//}
//function hh(){alert(11)}
//once(hh)
//console.log(hh)// function hh(){alert(11)}
// 类似于
function a(o){
o = 1; // o.aa = 22;
}
var obj = {
aa: 11
}
a(obj);
console.log(obj);
防抖动：希望函数在某些操作执行完成之后被触发。
输入框搜索数据时，为了限制从服务器读取数据的频率，我们可以等待用户输入结束 100ms 之后再触发查询；或者点击提交按钮获取数据，防止频繁的请求数据，限制用户提交完一段时间后再请求数据。（想想这里防抖动与上面节流的区别）
function debounce(fn, wait=500) {
let timer;
return function (...args) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
return fn.apply(this, args)
}, wait)
}
}
// 快速连续不停的点击，永远不会触发，直到停止点击，函数被执行一次
button.addEventListener('click', debounce(() => {
console.log('hhh');
getMoreData();
}))
节流和防抖动都是控制函数在一定时间内的执行次数，例如规定的时间间隔是500ms，如果连续在小于这个时间间隔内调用防抖动函数，该函数永远不会被执行（直到停止点击，触函数触发一次）；而节流函数会在每到达一段间隔的时间内有规律的被执行。
详见一句话说清楚.throttle和.debounce的区别
