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 相关文章推荐
JavaScript 学习初步 入门教程
Mar 25 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
jQuery实现滑动开关效果
Aug 02 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php提高网站效率的技巧
2015/09/29 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python读大数据txt
2016/03/28 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
详解django三种文件下载方式
2018/04/06 Python
Windows下安装Scrapy
2018/10/17 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python的range和linspace使用详解
2019/11/27 Python
关于Python解包知识点总结
2020/05/05 Python
python切割图片的示例
2020/11/12 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
关于赌博的检讨书
2014/01/24 职场文书
《雷雨》教学反思
2014/02/20 职场文书
医院护士工作检讨书
2014/10/26 职场文书
作文评语怎么写
2014/12/25 职场文书
2015年档案室工作总结
2015/05/23 职场文书
一年级语文教学随笔
2015/08/14 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
用Java实现简单计算器功能
2021/07/21 Java/Android
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js