JavaScript之map reduce_动力节点Java学院整理


Posted in Javascript onJune 29, 2017

如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clusters”,你就能大概明白map/reduce的概念。

map

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

JavaScript之map reduce_动力节点Java学院整理

由于map()方法定义在JavaScript的Array中,我们调用Arraymap()方法,传入我们自己的函数,就得到了一个新的Array作为结果:

function pow(x) {
  return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

map()传入的参数是pow,即函数对象本身。
你可能会想,不需要map(),写一个循环,也可以计算出结果:

var f = function (x) {
  return x * x;
};

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i<arr.length; i++) {
  result.push(f(arr[i]));
}

的确可以,但是,从上面的循环代码,我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。
所以,map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

只需要一行代码。

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方说对一个Array求和,就可以用reduce实现:

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
  return x + y;
}); // 25

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 #Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
You might like
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php实例分享之二维数组排序
2014/05/15 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
js 幻灯片的实现
2011/12/06 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python解析xml模块封装代码
2014/02/07 Python
python统计cpu利用率的方法
2015/06/02 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python3爬虫全国地址信息
2019/01/05 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
幼师自我鉴定范文
2013/10/01 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
公司租车协议书
2015/01/29 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书