JS高阶函数

1.函数式编程

        定义：函数式编程又称泛函编程，是一种编程范式，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。

var x = 10;
function demo(){
	x += 10;
}

x = 20
demo();

// 封闭作用域，并且不是使用任何外部易变的数据

---

扩展：命令式编程和函数式编程的区别    

// 命令式编程
var num1 = 2; 
var num2 = 3;
var sum = num1 + num2;
console.log(sum); 
 
// 函数式 
function add (n1, n2) { 
    return n1 + n2;
}
let sum = add(2, 3); 
console.log(sum);

从上文两种不同编程式的代码中可以明显看出区别就是：

      1.函数式编程拥有独立作用域，所以它里面的变量声明以及函数声明不会受到全局的污染

      2.函数式编程可以传递参数，所以它可以达到编程复用的效果，以此来节省不必要的内存空间

 2.纯函数

        定义：当一个函数的输出不受外部环境影响，同时也影响外部环境时，该函数就是纯函数。也就是说它只关注逻辑运算和数学运算，同一个输入总得到同一个输出。

---

        例一：此函数在相同输入值时，总是产生相同的输出。函数的输出和当前运行环境的上下文状态无关。

纯函数就类似数学中的函数，函数将输入参数映射到返回值，也就是说，对于每套输入，都存在一个输出。

function test(a){
    console.log(a*a);
}
test(10);
test(10);
test(10);
test(10);

        例二：此函数运行过程不影响环境运行，也就是无副作用（如触发事件、发起http请求、打印/log等）

一个函数执行过程对产生了外部可观察的变化，那么就说，这个函数是有副作用的。而纯函数没有产生任何可观察的副作用，也就是说它不能改变任何外部状态。

var num = 18;
function compare(x){
    return x > num;
}
console.log(compare(20))
// 不是纯函数

// 修改一下
var num = 18;
function compare(x){
    return x > 18;
}
console.log(compare(20))

// 传两个参数
var num = 18;
function compare(x,num){
    return x > num;
}
console.log(compare(20,num))
// 并不是使用外部的num 而是自己作用域内的num

        例三：如果函数为引用类型时

var arr = [];
function add(_arr){
    var obj = {name:'cts'};
    _arr.push(obj);
    return _arr;
}
add(arr);
console.log(arr);
// 并不是纯函数  引用类型


// 修改一下
var arr = [{name:'bailibn'}];
function add(_arr){
    var obj = {name:'cts'};
    // 创建一个新的arr
    var newArr = [];
    // 将arr中的内容进行克隆
    for(var i = 0;i<_arr.length;i++){
        // 用克隆方法进行克隆
        newArr[i] = _arr[i];
    }
    newArr.push(obj);
    return newArr;
}
console.log(add(arr))

// 简化一下
function add(x,y){
    return x+y;
}
var num1 = 1;
var num2 = 2;
add(num1,num2);// 纯函数

var GArr = [];
function add(arr){
    arr.push(1);
    return arr;
}
add(gArr);// 不是纯函数

看了以上三个例子相信你已经对纯函数的作用有所了解了吧！

纯函数的作用：

        1.JavaScript中很容易创建全局变量，这些变量可以在所有函数中访问到。这也是一个导致bug的常见原因，因为程序中的任何部分都可能修改全局变量从而导致函数的行为出现异常

        2.纯函数非常容易进行单元测试，因为不需要考虑上下文环境，只需要考虑输入和输出

---

扩展知识：

        JS中有不少内置的纯函数以及非纯函数

                纯函数：

                        Array.prototype.slice

                        Array.prototype.map

                        String.prototype.toUpperCase

                        ......

                非纯函数：                 

                        Math.random

                        Date.now

                        Array.ptototype.splice

                        ......

        BUG守恒定律：

                网站或应用的代码量达到一定程度，将不可避免包含某些bug，这不是JavaScript特有的问题，而是所有语言的通病。想要彻底清楚程序中的所有bug还是很难办到的，但是，我们可以通过某些编码方式来预防bug的引入

 3.惰性函数

        定义：针对优化频繁使用的函数。常用于函数库的编写、单例模式之中

---

        例如：现在要求写一个test函数，这个函数返回首次调用时的new Date().getTime()，注意是首次，而且不允许有全局变量的污染

var t = null;
function test () {   
    if(t){        //缺点：每次调用函数就需要进行一次if判断。并且t会污染全局变量。【惰性函数就是将这里的数据进行保存。下次不需要再进行判断】
        return t; 
    }
    t = new Date().getTime();
    return t;
}
 
test();   //其实在第一次调用之后，t的值已经固定了
test();
test();
test();

• 经过优化之后

var test = (function(){
    var t = null;
    return function () {       
         if(t){        //【只要第一次调用之后，test的t的值就已经知道了】该方法缺点：每一次调用test时仍然要判断。
            return t; 
        }
        t = new Date().getTime();
     }
    return t;
})();

4.节流&防抖 

        定义：在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的

---

        节流函数

                定义：函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样

                例如：抢购点击

// 阿里月饼门事件
<div id="show">0</div>
<button id="btn">click</button>

var oDiv = document.getElmentById('show');
var oBtn = document.getElmentById('btn');
oBtn.onclick = function(){
    oDiv.innerText = parseInt(oDov.innerHTML) + 1;
}

// 有些时候并不希望在做这些操作的时候我点击多少次执行多少次
// 有的时候只希望在一段时间内 无论点击多少次都算一次
// 节流
// 第一次点击成功触发 然后累积1000 在这1000中点击都不算 
var lastTime = 0;
oBtn.onclick = function(){
    // 判断当前点击的时间距离上一次是否大于1000
    var nowTime  = new Date().getTime();
    // 如果nowTime - lastTime > 1000
    if(nowTime - lastTime > 1000){
        div.innerHTML = Number(div.innerHTML) + 1;
        lastTime = nowTime;
    }
}

        防抖函数

                定义：短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。类似于公交车一段时间没有人上车，司机才会开车

                例如：百度输入搜索

// 比如用户就像搜索nba 但是无论输入多快都会触发三次
<input id="ipt">
var oIpt = document.getElementById('ipt');
var timer = null;
function ajax(){
    console.log(this.value);
}
oIpt.oninput = function(){
    // 保存this
    var self = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
        // 改变指向
        ajax.apply(self);
    },1000)
}

5.柯里化函数 

        定义：把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

也就是说，当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变），然后返回一个新的函数接收剩余的参数，返回结果，这就是函数的柯里化。

function checkAge(min){
    return function(age){
        return age >= nim;
    }
}

        作用：前端使用柯理化的用途主要就应该是简化代码结构，提高系统的维护性，一个方法，只有一个参数，强制了功能的单一性，很自然就做到了功能内聚，降低耦合。简而言之：柯理化的优点就是降低代码的重复，提高代码的适应性

---

  调用方式                     

function add(a,b,c){}; 
var newAdd = Curry(add);   //经过柯里化函数处理以后的add函数
newAdd(1)(2)(3)
newAdd(1,2)(3);

function curry (func) { 
	// 获取函数的形参个数，可以通过 函数名.length 
	// args 表示传进来的实际参数
	// 此处采取有名函数，而不是匿名函数，是因为当实参和形参的个数相同时，需要调用这个函数
    return function curriedFn (...args) { // ES6语法
        // 判断实参和形参的个数
        if (args.length < func.length) { 
        	// 当传入的参数 加上 剩余参数，等于形参个数时，执行下面的代码
            return function () {  // 获取本次调用时，传入的参数
                return curriedFn(...args.concat(Array.from(arguments))) 
            } 
        }
        // 实参大于等于形参个数时，调用 func，返回结果 
        return func(...args) // ES6语法 ... 将数组展开
    } 
} 

// 要柯里化的函数 
function getSum (a, b, c) { 
    return a + b + c 
}

let curried = curry(getSum) 

// 测试 
// (args.length = 3) = func.length，直接调用func, 返回结果
curried(1, 2, 3) 
// 1. (args.length = 1) < func.length , 执行匿名函数，调用curriedFn，传入参数2，此时 args.length = 2
// 2. (args.length = 2) < func.length, 执行匿名函数，调用curriedFn，传入参数3，此时 args.length = 3
// 3. (args.length = 3) = func.length，直接调用func, 返回结果
curried(1)(2)(3) 
// 1. (args.length = 2) < func.length , 执行匿名函数，调用curriedFn，传入参数3，此时 args.length = 3
// 2. (args.length = 3) = func.length，直接调用func, 返回结果
curried(1, 2)(3)