• Javascript函数中的高级运用


      先介绍一下js中的高阶函数,所谓的高阶函数就是,一个函数中的参数是一个函数或者返回的是一个函数,就称为高阶函数。

      js中已经提高了一下高阶函数,使用起来非常棒,当然我们也可以自己实现,我介绍几种ES5/ES6新增的数组函数。

      首先是forEach,forEach它接受两个参数,第一个函数,第二个传一个this引用对象(可以不传),函数支持传3个参数第一个表示遍历的当前值,第二个为索引,第三个表示当前对象。

    [1,2,4,5].forEach(function(item,index){
      console.log(item,index);
    })


      模拟forEach的实现

    Array.prototype.for = function(fn){
      for(var i=0;i<this.length;i++){
        fn(this[i],i);
      }
    };
    [2,3,4,5,6].for(function(item,index){
      console.log(item,index);
    })

      map返回处理过后的一个新数组


    var arr = [1,2,3,4,5];
    var a = arr.map(function(item,index){
      if(index>0){
        return item*index;
      }
      return item;
    })

    console.log(a); //[1, 2, 6, 12, 20]
    console.log(arr); //[1, 2, 3, 4, 5]

      模拟实现map


    var arr = [1,2,3,4,5];
    Array.prototype.m = function(fn){
      var arr = [];
      for(var i=0;i<this.length;i++){
        arr.push(fn(this[i],i,this));
      }
      return arr;
    };
    console.log(arr.m(function(item,index,thisValue){
      console.log(thisValue); //[1, 2, 3, 4, 5]
      if(item>3){
        return item;
      }
      return item-1;
    })) //[0, 1, 2, 4, 5]

      

      some方法用于检测数组中的元素是否满足指定条件,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,如果没有满足条件的元素,则返回false。

    Array.prototype.so = function(fn){
      for(var i=0;i<this.length;i++){
        if(fn(this[i],i,this)){
          return true;
        };
      }
      return false;
    };

    var arr = [1,2,3,4,5,6];

    console.log(arr.so(function(item){
      return item>7;
    }))

      filter返回满足条件的值,是一个新数组。

    Array.prototype.f = function(fn){
      var arr = [];
      for(var i=0;i<this.length;i++){
        fn(this[i],i,this)&&arr.push(this[i]);
      }
      return arr;
    };
    var arr = [1,2,3,4,5,6];
    console.log(arr.f(function(item){
      return item<2;
    }))

      every检测数组所有元素是否都符合指定条件,如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。


    Array.prototype.ev = function(fn){
      for(var i=0;i<this.length;i++){
        if(!fn(this[i],i,this)){
          return false;
        };
      }
      return true;
    };

    var arr = [1,2,3];

    console.log(arr.ev(function(item){
      return item>1;
    }))

    函数柯里化

      简单来说就是某些情况下我们执行某个函数,并不需要它直接返回一些值给我们,而是再我们需要的时候它再给我们返回,这就是函数柯里化,以下是某位大牛写的。

    一个 currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。

    不完全柯里化版

    var fn = (function(){
      var num = 0;
      return function(){
        if(arguments.length===0){
          return num;
        }else{
          for(var i=0;i<arguments.length;i+=1){
            num+=arguments[i];
          }
        }
      };
    }())

    fn(2);
    fn(2,2,2);
    fn(2);
    console.log(fn()); //10

    柯里化版

    var currying = function(fn){
    var arrNum = [];
      return function(){
        if(arguments.length===0){
          return fn.apply(this,arrNum);
        }else{
          [].push.apply(arrNum,arguments);
          return arguments.callee;
        }
      };
    }

    var count = (function(){
      var num = 0;
      return function(){
        for(var i=0;i<arguments.length;i+=1){
          num+=arguments[i];
        }
        return num;
      };
    }());

    var s = currying(count);
    s(3);
    s(3,3,3);


    console.log(s());

    函数反柯里化unCurrying
    创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。

    简单版

    var obj = {
    "length": 3,
    "0": 1,
    "1": 2,
    "2": 3
    };

    // Array.prototype.push.call(obj,3);
    // console.log(obj);

    function push(){
      var a = [].shift.call(arguments);
      Array.prototype.push.apply(a,arguments);
    };
    push(obj,3);
    push(obj,30);
    push(obj,'js');
    console.log(obj);


    也可以这样。

    var obj = {
    "length": 3,
    "0": 1,
    "1": 2,
    "2": 3
    };

    // Array.prototype.push.call(obj,3);
    // console.log(obj);

    Function.prototype.uncurrying = function(){
      var _this = this; //Array.prototype.push
      return function(){
        //删除第一个,并且返回 obj
        var obj = [].shift.call(arguments);
        //obj调用Array.prototype.push方法,传递arguments,注意此时arguments已经没有包含obj这个参数了。
        return _this.apply(obj,arguments);
      };
    };

    var push = Array.prototype.push.uncurrying();

    console.log(push(obj,'666'));
    console.log(obj)
    push(obj,'777');
    console.log(obj)

  • 相关阅读:
    Bootstrap组件---nav(导航条)
    (2)基于Bootstrap的网页开发
    Bootstrap组件简要汇总解析(不定期更新)
    知识碎片(长期更新)
    DOM中document对象的常用属性方法总结
    IE678如何兼容css3圆角属性
    17年面试问题总结
    0.1 js复习
    Basic knowledge about energy field
    BDA: single parameter models
  • 原文地址:https://www.cnblogs.com/pssp/p/5789473.html
Copyright © 2020-2023  润新知