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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
nicejforms——美化表单不用愁
Feb 20 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
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
东方红 - 来复式再生机的修复
2021/03/02 无线电
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
python中assert用法实例分析
2015/04/30 Python
Python回调函数用法实例详解
2015/07/02 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python编程的核心知识点总结
2021/02/08 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
大学军训感言400字
2014/03/11 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js