Heim  >  Artikel  >  Web-Frontend  >  javascript之典型高阶函数应用介绍_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:43:581096Durchsuche

缘由
虽然以前也使用过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;iif(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;iout[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(;ix=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 语言有具有循环语句。如果没有循环语句呢?留给下一次探索吧。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn