javascript函数式编程程序员的工具集


Posted in Javascript onOctober 11, 2015

如果你仔细看了到目前为止出现过的示例代码,你会发现这里面的一些方法不太熟悉。 它们是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

例子:

var myarray = [1, 2, 3, 4]
words = 'hello 123 world how 345 ya doing'.split(' ');
re = '[a-zA-Z]';
// 筛选整数
console.log([-2, -1, 0, 1, 2].filter(function(x) {
 return x > 0
}));
// 筛选所有含字母的单词
console.log(words.filter(function(s) {
 return s.match(re);
}));
// 随机移除数组中的元素
console.log(myarray.filter(function() {
 return Math.floor(Math.random() * 2)
}));

Array.prototype.reduce()

reduce()函数,有时也称为fold,它用于把数组中的所有值聚集到一起。回调需要返回组合对象的逻辑。 对于数字来说,它们往往会被加到一起或者乘到一起。对于字符串来说,它们往往是被追加到一起。

语法:arr.reduce(callback [, initialValue]);

参数
•callback():此函数把两个对象合并成一个对象,并将其返回。参数有: ◦previousValue:上一次回调函数被调用时返回的值,或者是初始值(如果有的话)
◦currentValue:数组当前正在处理的元素
◦index:数组中当前元素的序数
◦array:当前正在处理的数组

•initialValue:可选。第一次回调所传入参数的初始值

例子

var numbers = [1, 2, 3, 4];

// 把数组中所有的值加起来
console.log([1, 2, 3, 4, 5].reduce(function(x, y) {
 return x + y
}, 0));

// 查找数组中最大的值
console.log(numbers.reduce(function(a, b) {
  return Math.max(a, b) // max()函数只能有两个参数
 }) 
);

其它函数

map()、filter()和reduce()函数在我们辅助函数的工具箱里并不孤单。这里还有更多的函数几乎在所有函数式应用里都会被使用。

Array.prototype.forEach

forEach()函数本质上是map()函数的非纯版本,它会遍历整个数组,并对每个元素应用回调。 然而这些回调函数不返回值。它是实现for循环的一个更纯粹的方式。

语法:arr.forEach(callback [, thisArg]);

参数:
•callback():对数组中每一个元素所应用的。参数有: ◦currentValue:数组中当前正在处理的元素
◦index:数组中当前元素的序数
◦array:正在处理的数组

•thisArg:可选。回调函数中作为this的值

例子:

var arr = [1, 2, 3];
var nodes = arr.map(function(x) {
 var elem = document.createElement("div");
 elem.textContent = x;
 return elem;
});

// 对每一个元素的值输出日志
arr.forEach(function(x) {
 console.log(x)
});

// 把节点追加到DOM上
nodes.forEach(function(x) {
 document.body.appendChild(x)
});

Array.prototype.concat

如果不用for或while处理数组,你会经常需要把数组拼接起来。另一个Javascript内建函数concat就是专门干这事儿的。 concat函数会返回一个新数组但不改变旧数组。它可以把你传入的所有参数拼接到一起。
console.log([1, 2, 3].concat(['a','b','c']) // 拼接两个数组
// Output: [1, 2, 3, 'a','b','c']

它返回两个数组拼接成的数组,同时原来的那些数组没有被改变。这就意味着concat函数可以链式调用。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var x = arr1.concat(arr2, arr3);
var y = arr1.concat(arr2).concat(arr3));
var z = arr1.concat(arr2.concat(arr3)));
console.log(x);
console.log(y);
console.log(z);

变量x、y、z的值最后都是[1,2,3,4,5,6,7,8,9]。

Array.prototype.reverse

这个Javascript内建函数是用于数组变形的。reverse函数用于将一个数组反转,也就是第个一元素会跑到最后, 而最后一个元素变成了第一个元素。

然而,这个函数并不会返回一个新的数组,而是把原来的数组替换掉了。我们可以做个更好的。下面是一个纯的反转数组函数

var invert = function(arr) {
 return arr.map(function(x, i, a) {
  return a[a.length - (i + 1)];
 });
};
var q = invert([1, 2, 3, 4]);
console.log(q);

Array.prototype.sort

与map()、filter()和reduce()函数相似,排序函数sort()需要传入一个回调函数来定义数组如何排序。 但是,跟reverse()一样,它也会把原来的数组替换。这可不太好。
arr = [200, 12, 56, 7, 344];
console.log(arr.sort(function(a,b){return a?b}) );
// arr现在是: [7, 12, 56, 200, 344];

我们可以写一个纯函数的sort(),但是排序算法的源代码很麻烦。对于特别大的数组,应当根据特定的数据结构来选用适合的算法, 比如快速排序、合并排序、冒泡排序等等。

Array.prototype.every 和 Array.prototype.some

Array.prototype.every() 和 Array.prototype.some() 都是纯的高阶函数,它们是Array对象的方法, 通过回调函数根据数组各元素返回的布尔值(或相当于布尔的值)来进行测试。如果数组中所有的元素通过回调函数计算都返回True, every()函数就返回true;如果数组中有一个元素返回True,some()函数就返回True。

例子:

function isNumber(n) {
 return !isNaN(parseFloat(n)) && isFinite(n);
}
console.log([1, 2, 3, 4].every(isNumber)); // Return: true
console.log([1, 2, 'a'].every(isNumber)); // Return: false
console.log([1, 2, 'a'].some(isNumber)); // Return: true
Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
Javascript函数式编程简单介绍
Oct 11 #Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 #Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 #Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 #Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 #Javascript
You might like
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
公司董事长岗位职责
2014/06/08 职场文书
2014年教学工作总结
2014/11/13 职场文书
个人廉政承诺书
2015/04/28 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
新闻稿格式范文
2015/07/18 职场文书
少先队中队工作总结
2015/08/14 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL