脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 高阶函数

javascript之典型高阶函数应用介绍

 更新时间：2013年01月10日 08:55:20   作者：  
这几个方法均为javascript 1.6 数组新增的方法。是很典型的functional 函数，当然也非常实用。下面是functional的定义并不来自javascript

缘由
虽然以前也使用过javascript语言，但终究是为了配合后端写的一些零零散散的“代码段”，更不能说是javascript项目了。很荣幸的是上个月刚到公司正好碰上项目开始推倒重写，我们team从头开始做架构和实现，目的很清楚，为了改进和超越前面的版本。这是个真正意义上的javascript“项目”，当然服务端不是我们team来负责啦。这也是我真正开始全职使用javascript来编程。由于之前在学校对形式化方法这门课程比较感兴趣，而javascript又是函数式语言，因此我想把更多functional的东西用javascript来表现一下。

几个函数
这几个方法均为javascript 1.6 数组新增的方法。是很典型的functional 函数，当然也非常实用。下面是functional的定义并不来自javascript。

filter：接受一个集合Xs（X表示类型,s表示集合），一个谓词，这个谓词是从X到bool的映射（函数）。然后过虑这个集合，并返回谓词为true的元素组成的集合。下面是简单的实现：

复制代码 代码如下:

function filter(arr,callback){
var i,out=[];
for(i=0;i<arr.length;i++){
if(callback(arr[i]))
out.push(arr[i]);
}
return out;
}

再加一个简单的测试：
复制代码 代码如下:

var arr = [1,2,3,4,5,6,7,8,9,10];
var even = function(item){
if(typeof item !== "number") return false;
return !(item & 1);
};
var filtered = filter(arr,even);
console.log(filtered);

结果：
2,4,6,8,10
map：接受一个集合Xs，一个函数f，然后把Xs集合中每一个元素按照顺序使用f映射，并返回集合f x1, f x2, f x3 ... f xn。实现如下：
复制代码 代码如下:

function map(arr,callback){
var i,l= arr && arr.length || 0,out = new Array(l);
for(i=0;i<l;i++)
out[i]=callback(arr[i]);
return out;
}

测试一下：
复制代码 代码如下:

var arr = [1,2,3,4,5,6,7,8,9,10];
var addTen = function(item){
return item + 10;
};
var mapAdded = map(arr,addTen);
console.log(mapAdded);

结果：
11,12,13,14,15,16,17,18,19,20
另外还有forEach，every和some三个函数在javascript 1.6中出现。但在使用过程中感觉还是缺少一个有力的函数，它就是折叠函数(fold)。正所谓map-reduce，有了map而没有"reduce"岂不是很扫兴？下面就来看看这个”reduce“。

Reduce的实现
上面说的reduce其实也就是折叠函数(fold)。它接受一个Xs集合，一个二元操作符f。然后将f插入到集合中的每两个相邻元素之间。举个例子，fold plus [1,2,3,4] 意即 1+2+3+4。为了更加精确，通常需要一个”起始元素“作为f最开始时的第二个参数。例如 fold plus [1,2,3,4] 意即 (1+(2+(3+(4+0)))。下面是实现：
复制代码 代码如下:

function fold(arr,callback,b){
var i,x;
if(b) x=b,i=0;
else x=arr[0],i=1;
for(;i<arr.length;i++)
x=callback(arr[i],x);
return x;
}

测试：
复制代码 代码如下:

var arr = [1,2,3,4,5,6,7,8,9,10];
var plus = function(a,b){
return a+b;
};
var foldPlus = fold(arr,plus,0);
console.log(foldPlus);

结果：
55

这个函数在ECMAScript 5中名字就叫reduce，而函数式里面通常称做fold而已，这是很形象的名字。
总结
其实上面在实现这些functional函数的时候编写风格并不是函数式的，因为javascript 语言有具有循环语句。如果没有循环语句呢？留给下一次探索吧。

您可能感兴趣的文章:

相关文章

  • js实现简单进度条效果

    js实现简单进度条效果

    这篇文章主要为大家详细介绍了js实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js 金额格式化来回转换示例

    js 金额格式化来回转换示例

    这篇文章主要介绍了js 金额格式化来回转换实现,需要的朋友可以参考下
    2014-02-02
  • uniapp电商小程序实现订单30分钟倒计时

    uniapp电商小程序实现订单30分钟倒计时

    这篇文章主要为大家详细介绍了uniapp电商小程序实现订单30分钟倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 原生JS实现几个常用DOM操作API实例

    原生JS实现几个常用DOM操作API实例

    下面小编就为大家带来一篇原生JS实现几个常用DOM操作API实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Javascript与flash交互通信基础教程

    Javascript与flash交互通信基础教程

    说明: 略作修改,主要是一些很初级的操作; 又很多相似的文章,不过这个很权威
    2008-08-08
  • js Li来实现的效果

    js Li来实现的效果

    原理就是利用js控制li的一些样式，在实际应用中，还需要注意li的list-style属性。
    2008-12-12
  • JS中对数组元素进行增删改移的方法总结

    JS中对数组元素进行增删改移的方法总结

    本文主要JS中对数组元素进行增删改移的方法，用表格的形式进行整理，方便阅读，具有很好的参考价值，下面就跟小编一起来看下吧
    2016-12-12
  • javascript实现时间格式输出FormatDate函数

    javascript实现时间格式输出FormatDate函数

    这篇文章主要介绍了javascript实现时间格式输出FormatDate函数,可实现fmt标签一样对日期时间型内容格式输入的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 用director.js实现前端路由使用实例

    用director.js实现前端路由使用实例

    本篇文章主要介绍了director.js实现前端路由，在不刷新的情况下，利用“#”号组织不同的URL路径，并根据不同的URL路径进行不同的方法调用。有兴趣的了解一下。
    2017-01-01
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道，null 没有任何的属性值，并且无法获取其实体（existence）值。所以 null.property 返回的是错误（error）而不是 undefined 。
    2008-09-09

最新评论