先介绍一下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)

Javascript函数中的高级运用的更多相关文章

  1. Javascript函数中传递带空格的参数

    通常在页面中要让某些内容点击后产 生点击事件(非页面跳转)都会使用onclick,但是这样不适于需要传递参数的情况,于是写成直接调用Javascript函数的方式:<a href=javascr ...

  2. 在JavaScript函数中使用EL表达式注意的事项

    最近在使用JSP显示从Servlet带过来的数据时,大量的使用到了EL表达式,并且有些EL表达式是在使用到JavaScript的函数时作为参数传入的,举个例子,比如下面的样子: 这个HTML标签的意思 ...

  3. JavaScript函数中的参数(arguments)

    arguments argument是JavaScript中的一个关键字,用于指向调用者传入的所有参数. function example(x){ alert(x); alert(arguments. ...

  4. javascript函数中的三个技巧【二】

    技巧二: [惰性载入函数] 因为浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题,比如,我们最常见的为dom节点添加时间的函数 functio ...

  5. javascript函数中with的介绍

    /*js函数中with函数的用法分析定义 方便用来引用某个对象中已有的属性但是不能用来给对象添加属性 要给对象创建新的属性 必须明确的引用该对象*/代码格式with(object) statement ...

  6. javascript函数中变量重名

    <script type="text/javascript"> function fun(a){ console.log(a); // function var a=1 ...

  7. javascript函数中的三个技巧【三】

    技巧三: [函数绑定] 在javascript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便 ...

  8. javascript函数中的三个技巧【一】

    在学习javascript中,函数是非常重要的,现在我来谈谈对函数的理解以及在工作和用法中的一些技巧 技巧一. [作用域安全的构造函数] 构造函数其实就是一个使用new操作调用的函数 function ...

  9. 随笔:JavaScript函数中的对象----arguments

    关于arguments 调用函数时,如果需要传参,其实参数就是一个数组,在函数体的内置对象arguments可以访问这个数组,如: arguments[0]:第一个参数 arguments[1]:第二 ...

随机推荐

  1. Kernel Functions for Machine Learning Applications

    In recent years, Kernel methods have received major attention, particularly due to the increased pop ...

  2. code review作业

    下面是对结对编程队友12061166 宋天舒的code review 五个优点: 1.代码的风格优秀,注释不多,但是必要的注释还是有的,比如: // 三种模式 // mode1仅统计单个单词 // m ...

  3. 【整理】--C++三种参数传递方式

    在C++中,共有三种参数传递方式: 按值传递(pass by value) 地址传递(pass by pointer) 引用传递(pass by reference) (1)按值传递的过程为:首先计算 ...

  4. java 上传POJO model jar

    打开eclipse----找到要打包的java文件,右键----Export----选择 JAR File 然后NEXT,会让你选择打包的文件,,选择你想打包的,一个或几个.... 在文件选择框的下面 ...

  5. HTML5-表格

    表格:表头<caption>,行<tr>,列<td>,标题<th> 属性:cellpadding="10" cellspacing= ...

  6. input只读属性区别

    readonly disabled 相同点:都是禁止输入 不同点:readonly属性会把该input提交到form表单 disabled属性不会把该input提交到form表单

  7. linux配置java环境变量(详细) -copy

    一. 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录, 执行命令 ./jdk-6u14-linux-i586.bin 这时会出现一段协议,连继敲回车, ...

  8. Restful.Data 开源持久层组件项目最新进展和使用说明

    Restful.Data 经过 博客园 和 CSDN 的宣传,目前参与该项目的人数已达到 114 人(群号:338570336),虽大部分并不参与实际开发,但他们所提出的意见和建议以及在试用过程中发现 ...

  9. WebAPI的一种单元测试方案

    大家是如何对webApi写测试的呢? 1.利用Fiddler直接做请求,观察response的内容. 2.利用Httpclient做请求,断言response的内容. 3.直接调用webApi的act ...

  10. 【转】EntityFramework(EF)贪婪加载和延迟加载的选择和使用

    原谅:http://www.weixq.cn/Article/Detail/906 贪婪加载:顾名思议就是把所有要加载的东西一 次性读取 using (var context = new MyDbCo ...