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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
vuex实现简易计数器
Oct 27 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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
通俗易懂的php防注入代码
2010/04/07 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python决策树分类算法学习
2017/12/22 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
python反扒机制的5种解决方法
2021/02/06 Python
生产副总岗位职责
2013/11/28 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书