【学习笔记69】函数的柯里化

一、认识函数的柯里化

• 将一个接受多个参数的函数，更改为需要调用多次, 每次只传一个参数的函数
• 利用了闭包, 延长了 外部函数的参数使用时间

（一）基础版

        function sum (a, b) {
            console.log(a + b)
        }
        sum(10, 20);
        sum(10, 30);
        sum(10, 40);

（二）进阶版

        function sum (a) {
            return function (b) {
                console.log(a + b);
            }
        }
 
        let res = sum(10);
        console.log(res);   
        res(20);
        res(30);
        res(40);
 
        let res1 = sum(100);
        res1(20);
 
        let res2 = sum(200);
        res2(20);

（三）正则验证密码

1、基础版

        const reg = /^\w{6,10}$/;
        const boo = reg.test('abc123');
        console.log(boo);

2、函数封装

基础版

        function myTest1(str) {
            return /^\w{6,10}$/.test(str);
        }
        function myTest2(str) {
            return /^\d{4,8}$/.test(str);
        }
        let boo1 = myTest1('abc123');
        let boo2 = myTest1('123');
        console.log(boo1);     //true
        console.log(boo2);     //false

进阶版

        function myTest(reg, str) {
            return reg.test(str);
        }
        let boo = myTest(/^\w{6,10}$/, 'abc123');
        console.log(boo);
 
        let boo1 = myTest(/^\d{4,8}$/, '123456');
        let boo2 = myTest(/^\d{4,8}$/, '7890123');
        let boo3 = myTest(/^\d{4,8}$/, 'asdzxcasd');
        console.log(boo1);
        console.log(boo2);
        console.log(boo3);

 3、函数的柯里化

        function curry(reg) {
            return function (str) {
                return reg.test(str);
            }
        }
        let test1 = curry(/^\d{4,8}$/);
        console.log(test1);
 
        let boo1 = test1('123456');
        console.log(boo1);
 
        let boo2 = test1('qwe123456');
        console.log(boo2);
 
 
        let test2 = curry(/^\w{6,10}$/);
        console.log(test2);
 
        let boo3 = test2('!@#$%^&*');
        console.log(boo3);
 
        let boo4 = test2('123qwe');
        console.log(boo4);

二、封装柯里化

• 外层函数负责收集参数
• 内层函数负责在参数收集完毕的时候执行功能

    https://www.baidu.com:8080/index.html
 
    https://www.baidu.com:8080/a.html
 
    协议: https http
 
    域名: www.baidu.com     www.taobao.com      127.0.0.1
 
    端口号: 0~65535         80      443     7777
 
    地址: index.html        a.html      /a/b/c.html

1、基本实现 

        function fn(a, b, c, d) {
            return a + '://' + b + ':' + c + d
        }
        let res1 = fn('http', '127.0.0.1', '80', '/a.html')
        console.log(res1);
 
        let res2 = fn('http', '127.0.0.1', '443', '/b.html')
        console.log(res2);
 
        let res3 = fn('http', '127.0.0.1', '8080', '/c.html')
        console.log(res3);

 2、封装柯里化

        function fn(a, b, c, d) {
            return a + '://' + b + ':' + c + d
        }
        
        // 外层函数 负责接接收参数
        function currying(callback, ...arg) {
            // ...arg 将后续所有实参, 以数组的形式存放在arg形参内, 如果没有传递的话, 是一个空数组
 
            // 功能函数, 首次调用必传
            // console.log(callback)  
            // 基本参数, 首次调用可传可不传  
            // console.log(arg)        
            // 函数名.length 能获取到函数的形参数量 
            // console.log(callback.length)    
 
            const len = callback.length;
 
            // 内层函数负责 当前是否接受够参数了
            return function (...iArg) {
                // 开始执行共能前, 先将两次函数调用接受的参数合并为一个数组, 后续用于计算传递的参数是否足够
                iArg = [...arg, ...iArg]    
 
                // 如果传递的参数数量, 刚好是功能函数需要的数量, 代表此时参数足够, 直接执行函数即可
                if (iArg.length === len) {  
                    // 执行功能函数, 此时会得到一个拼接好的字符串, 我们将这个字符串返回出去, 就能得到功能函数的执行结果
                    return callback(...iArg)    
 
                 // else 分支执行时表明此时函数参数仍未接受足够, 此时需要继续接受参数,
                //  根据函数功能, 我们应该调用currying并将之前接收的功能函数与之前传递所有的参数全部传递进去
                } else {
                    // callback => 功能函数     ...iArg => 之前传递进来的所有的参数                       
                    return currying(callback, ...iArg)  
                    // 这里是返回了一个 currying的调用结果, 所以相当于是返回了内层函数, 并且外层函数是接受了对应的功能函数与实际参数
                }
            }
        }
 
        // 此处传递了功能函数与一个基本参数, 按照函数规则, 后续起码应该再传递够三个参数, 才能正常执行功能
        let res = currying(fn, 'https') 
        // 此时传递了两个参数, 加上首次调用的一个参数, 现在接收到了 3个字符串, 所以应该在传递一个参数, 才能够正常执行
        let res1 = res('127.0.0.1', '80')   
         // 此时传递了 一个 参数, 加上之前的三个字符串参数, 所以现在正好满足 4个参数, 所以现在就可能正常执行功能函数
        let str1 = res1('/a.html')         
        console.log(str1)   // https://127.0.0.1:80/a.html
 
         // 此处传递了 功能函数, 没有传递基本参数, 按照函数规则, 后续起码应该传递四个参数, 才能正常执行功能
        let res2 = currying(fn)
        // 此时传递了四个参数, 因为首次没有传递字符串, 这里就是有4个参数, 所以正常执行函数
        let str2 = res2('https', 'www.baidu.com', '8080', '/a.html')    
        console.log(str2)   // https://www.baidu.com:8080/a.html
 
        // 此处传递了 功能函数, 与 四个后续的参数, 根据函数规则, 后续不需要传递参数即可
        let res3 = currying(fn, 'https', 'www.baidu.com', '8080', '/a.html')    
        // 因为之前传递的参数已足够, 所以此处可以不调用
        let str3 = res3()   
        console.log(str3)   // https://www.baidu.com:8080/a.html

3、无注释

        function fn(a, b, c, d) {
            return a + '://' + b + ':' + c + d
        }
        
        function currying(callback, ...arg) {
 
            const len = callback.length;
 
            return function (...iArg) {
                iArg = [...arg, ...iArg]    
 
                if (iArg.length === len) {  
                    return callback(...iArg)    
 
                } else {
                    return currying(callback, ...iArg)  
                }
            }
        }
 
        let res = currying(fn, 'https') 
        let res1 = res('127.0.0.1', '80')   
        let str1 = res1('/a.html')         
        console.log(str1)   // https://127.0.0.1:80/a.html
 
        let res2 = currying(fn)
        let str2 = res2('https', 'www.baidu.com', '8080', '/a.html')    
        console.log(str2)   // https://www.baidu.com:8080/a.html
 
        let res3 = currying(fn, 'https', 'www.baidu.com', '8080', '/a.html')    
        let str3 = res3()   
        console.log(str3)   // https://www.baidu.com:8080/a.html

三、函数防抖与节流

    "text" id="inp">
    <script>
 
        const inp = document.querySelector('#inp')
 
        let flag = true
        inp.oninput = function (e) {
 
            if (flag === false) return
 
            flag = false
            console.log(`搜索了 ${e.target.value} 内容`)
 
            setTimeout(() => {
                flag = true
            }, 300)
        }
    script>

（一）节流

• 在一定时间内, 快速触发同一事件
• 在规定时间内, 只能触发一次, 下一次必须等到规定时间结束以后才能执行

1、补充知识点 

自执行函数

• 第一个小括号内写函数体
• 第二个小括号内写实参(会传递给第一个小括号内部的函数)

•             ; (function (num) {

                  console.log(num)

              })(666)

      (function () {
            console.log(999)
        })();
 
        ; (function () {
            console.log(999)
        })()

2、节流

    "text" id="inp">
    <script>
        // 节流
        inp.oninput = (function (flag) {
            return function (e) {
                if (flag === false) return
 
                flag = false
                console.log(`搜索了 ${e.target.value} 内容`)
 
                setTimeout(() => {
                    flag = true
                }, 300)
            }
        })(true)
    script>

（二）防抖

• 在一定时间内, 快速触发同一事件
• 每次重新触发, 都顶掉前一次事件, 以后一次事件为主

    "text" id="inp">
    <script>
        inp.oninput = (function (timer) {
            return function (e) {
                clearInterval(timer)
 
                timer = setTimeout(function () {
                    console.log(`搜索了 ${e.target.value} 内容`)
                }, 300)
            }
        })(0)
    script>