如果你仔细看了到目前为止出现过的示例代码,你会发现这里面的一些方法不太熟悉。 它们是map()、filter()和reduce()函数,它们对任何语言的函数式编程都至关重要。 它们可以让你不必使用循环和语句,写出更简洁的代码。
map()、filter()和reduce()函数组成了函数式程序员工具集的核心部分,这个工具集包括一系列纯的、 高阶的函数,它们是函数式方法的主力。实际上,它们是纯函数和高阶函数的典型,它们以一个函数为输入, 返回一个输出结果,并且不产生副作用。
然而它们是浏览器中ECMAScript 5.1的实现标准,它们只工作于数组。每次调用它们,一个新的数组会被创建并返回, 而原来存在的那个数组不会被改变。它们以函数为输入,经常使用匿名函数作为回调函数。它们遍历数组, 并对数组的每一个元素应用这个函数!
myArray = [1,2,3,4]; newArray = myArray.map(function(x) {return x*2}); console.log(myArray); // Output: [1,2,3,4] console.log(newArray); // Output: [2,4,6,8]
还有一点,它们只作用于数组,无法作用于其它可迭代的数据结构,比如对象。不用担心, 有很多库比如Underscore.js,Lazy.js,stream.js等等都实现了它们自己的更强大的map()、 filter()和reduce()。
回调
如果你以前从来没用过回调,那这个概念可能会让你有些迷惑。尤其是在Javascript中, Javascript给出了好几种声明函数的方式。
回调函数用于传递给另外一个函数供它们使用,这是一种像传递对象一样来传递逻辑的方式:
var myArray = [1,2,3]; function myCallback(x){return x+1}; console.log(myArray.map(myCallback));
对于比较简单的任务可以用匿名函数:
console.log(myArray.map(function(x){return x+1}));
回调不仅用于函数式编程,在Javascript中它们能干很多事情。仅作为例子,这有个callback()函数用于jQuery的AJAX调用:
function myCallback(xhr) { console.log(xhr.status); return true; } $.ajax(myURI).done(myCallback);
注意这里只用了函数的名字,因为我们并不是要调用函数而是传递函数,写成这样就错了:
$.ajax(myURI).fail(myCallback(xhr)); // 或者 $.ajax(myURI).fail(myCallback());
如果我们调用了函数会发生什么?在这个例子里,myCallback(xhr)会尝试执行,控制台将打印“undefined”, 并会返回true。当ajax()完成调用时,它根据名字找到的回调函数将是一个"true",然后就报错了。
也就是说我们无法指定给回调函数传什么参数,如果我们的回调函数需要让ajax()函数传给他我们想要的参数, 我们可以把回到函数包在一个匿名函数里:
function myCallback(status) { console.log(status); return true; } $.ajax(myURI).done(function(xhr) { myCallback(xhr.status) });
Array.prototype.map()
map()是这些函数的老大,它简单地对数组里的元素依此应用回调函数。
语法:arr.map(callback [, thisArg]);
参数:
•callback(): 这个函数为新数组产生一个元素,它接收的参数: ◦currentValue:数组当前遍历到的元素
◦index:数组中当前元素序数
◦array:当前正在处理的数组
•thisArg:这是个可选参数,当执行回调的时候它作为回调函数的this
例子:
var integers = [1, -0, 9, -8, 3], numbers = [1, 2, 3, 4], str = 'hello world how ya doing?'; // 将整数映射为他们自己的绝对值 console.log(integers.map(Math.abs)); // 将数组中的元素与自己的位置序数相乘 console.log(numbers.map(function(x, i) { return x * i })); // 单词隔一个变一个大写 console.log(str.split(' ').map(function(s, i) { if (i % 2 == 0) return s.toUpperCase(); else return s; }));
尽管Array.prototype.map方法是Javascript中数组对象的标准方法,你也可以很容易地扩展自己的对象。
MyObject.prototype.map = function(f) { return new MyObject(f(this.value)); };
Array.prototype.filter()
filter()函数用于把数组中的一些元素筛选出来。回调函数必须返回真(保留到新数组里)或假(扔掉)。 用map()可以做类似的事情,就是把你像扔掉的元素返回为null,不过filter()函数会在新数组里面删除这些不要的元素, 而不是留个null占着位置。
语法:arr.filter(callback [, thisArg]);
•callback():这个函数用来测试数组中的每个元素,要保留返回真,否则返回假。它有这些参数: ◦currentValue:数组当前遍历到的元素
◦index:数组中当前元素的序数
◦array:当前正在处理的数组
•thisArg:这是个可选参数,当执行回调的时候它作为回调函数的this
例子: