zoukankan      html  css  js  c++  java
  • js函数式编程

      js 函数式编程

        定义把函数作为第一类对象是函数式编程的第一步,函数式编程是一种编码风格,他通过书写函数式代码来解决问题(而不是一系列执行步骤,就像

        就像那种更主流的命令式编程),函数式编程可以让代码更容易测试、扩展、及模块化

        1.函数是javascript中的一等公民,(主要是的某个变量可以等于一个函数,然后是用变量名加()去调用这个函数)

          1.1构造函数

          1.2普通函数

        1.1函数作为构造函数使用,一般构造函数的首字母大写,做为构造函数使用,我们就可以使用new去创建那个实力

    function Person() {
        this.name = 'cz';
        this.age = 19;
        this.sex = '';
        this.fn = function (val) {
            console.log(val)
        }
    }
    
    let p1 = new Person();
    
    console.log(p1.name,p1.age,p1.sex)
    p1.fn('a')

        1.2 作为普通函数调用,这个就是最简单的使用

    function speak(val) {
        console.log(val+'wawawahahha');
    }
    speak('duide')

        

      2几种常见的函数使用

        2.1 函数作为变量的使用(回调函数,)

    function goback(a,b,callback) {
        let c = a + b;
        callback(c)
    }
    function cc(last) {
        console.log(last)
    }
    goback(1,2,cc);

        /* 手动实现数组的排序功能 */

    Array.prototype.zdysort = function (fn) {
        let len = this.length;
        for(let i = 0;i < len; i++) {
            for(let j = i+1;j < len; j++) {
                let temp = this[i]
                if(fn(this[i],this[j])) {
                    this[i] = this [j]
                    this[j] = temp
                }
            }
        }
    }
    /* 升序 */
    function sort(a,b) {
        return a>b
    }
    let arrys = [1,25,3,6,7,9,45,21,35,62,54,21]
    arrys.zdysort(sort)
    console.log(arrys)
    function usort(a,b) {
        return a<b
    }
    arrys.zdysort(usort)
    console.log(arrys)
    
    // (12) [1, 3, 6, 7, 9, 21, 21, 25, 35, 45, 54, 62]
    // (12) [62, 54, 45, 35, 25, 21, 21, 9, 7, 6, 3, 1]

        2.2函数柯里化

          维基百科上说道:柯里化,英语:Currying(果然是满满的英译中的既视感),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

        

    /* 函数科里化 */
    
    /* 一个简单的函数柯里化 */
    
    function add (a,b) {
        return a+b;
    }
    function kadd(a) {
        return function (b) {
            return a+b
        }
    }
    console.log(add(1,2)) // 3
    console.log(kadd(1)(2))  // 3
    
    /* 柯里化 实现函数参数的复用 */
    
    function Istype (type) {
        return function (obj) {
            return typeof(obj) === type
        }
    }
    
    let Isnumber = Istype('number')
    console.log(Isnumber(1))
    console.log(Isnumber('a'))
    console.log(Isnumber(4))
    
    let isobject = Istype('object')
    console.log(isobject({}))
    console.log(isobject('a'))
    console.log(isobject(4))
    /* 使用函数柯里化实现 函数的bind */
    
    Function.prototype.zdybind = function (content) {
        let self = this
        return function () {
            return self.call(content,arguments)
        }
    }
    
    function Animal(){    
        this.name = "Animal";    
        this.showName = function(){    
            console.log(this.name);    
        }    
    } 
    
    // Animal.showName();// 报错 animal is not a function
    
    let a1 = new Animal();
    a1.showName() // "Animal"
    a1.showName.call({name:'czcz'}) //czcz
    /* 使用自定义的bing函数 */
    a1.showName.zdybind({name:'czcz'}) // 输出无
    /* bind 相对于 call和apply 需要自己手动调用 */
    a1.showName.zdybind({name:'czcz'})() //'czcz'  自定义的zdybind函数就实现了

      函数,不得不提的就是函数上原生就有的三个方法,bind,call,apply,他们都能改变函数的执行作用域(运行时的函数this指向)

      call 和 apply 基本上一样,就是传入的第二参数不一样,一个传入的参数用,call(self,a,b,c,d) bind(self,[a,b,c,d]) ,而bind和他们的区别就是bind创建后不会立即执行,上面已经实现

       函数式编程远远都不止这么一点,上面只是一些平常会经常遇见的问题,函数运行时的执行环境也是非常重要的。直接调用,作为构造函数调用,箭头函数,apply bing,call,之后的函数作用域

      ,es6 还对函数新增的一些扩展

      3.es6函数的扩展 

        3.1 函数的默认参数问题

    function speak(name = 'cz') {
        console.log(`${name} i love you`)
    }
    speak()
    speak('czkjjj')

        3.2参数的解构赋值

        3.3 rest 参数,直接将argument直接转化成数组

        3.4name 和length属性, name 代表函数名字, length 代表函数的参数 length 长度不包括rest 参数

        3.5 es6函数最重要的扩展,箭头函数,(没有自身this的函数,只想上一级不为箭头函数的函数)

    /* es6箭头函数 */
    /* 数组排序是箭头函数的使用 */
    let arrys = [25,1,34,5,64,15,3,1,7,84,65]
    let newarrys = arrys.sort(function(a,b){
        return a - b
    })
    console.log(newarrys)
    /* setTimeout 中的this指向  函数体内的this对象,就是定义时所在的对象 ,而不是运行时的this*/
    
    let obj = {
        a: 'czcz',
        b: 'dddd',
        c: function () {
            setTimeout (function () {
                console.log(this.a)
            },0)
        }
    }
    obj.c(); // 输出undefined 这里内部的函数最终的执行环境 window
    /* 改造一下函数 */
    obj.d = function () {
        setTimeout(()=>
        {
            console.log(this.a)
        },0)
    }
    obj.d() // 输出'czcz' 这里内部的函数最终的执行环境 obj
  • 相关阅读:
    小程序上传多张图片
    小程序倒计时遇到的问题
    taro小程序展示富文本
    taro小程序地址选择组件
    构建基于Suricata+Splunk的IDS入侵检测系统
    SQL注入学习资料总结
    常见WAF绕过思路
    业务安全漏洞挖掘归纳总结
    细说验证码安全 —— 测试思路大梳理
    验证码安全那些事
  • 原文地址:https://www.cnblogs.com/czkolve/p/10779554.html
Copyright © 2011-2022 走看看