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

 更新时间:2017年06月29日 11:04:36   作者:liaoxuefeng  
这篇文章主要为大家详细介绍了JavaScript之map reduce的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

map

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

由于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

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

相关文章

  • JS实现微信摇一摇原理解析

    JS实现微信摇一摇原理解析

    这篇文章主要为大家详细介绍了JS微信摇一摇的实现原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Object.keys()、Object.values()、Object.entries()用法总结

    Object.keys()、Object.values()、Object.entries()用法总结

    本文主要介绍了Object.keys()、Object.values()、Object.entries()用法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JavaScript自定义日历实现签到功能

    JavaScript自定义日历实现签到功能

    这篇文章主要为大家详细介绍了JavaScript自定义日历实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 了解Javascript的模块化开发

    了解Javascript的模块化开发

    这篇文章主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下
    2015-03-03
  • JavaScript中Map与reduce的应用小结

    JavaScript中Map与reduce的应用小结

    Map构造函数创建一个新Map对象,它允许以键值对的形式存储数据,提供了一种更加灵活的数据结构,本文给大家介绍JavaScript中Map与reduce的应用小结,感兴趣的朋友一起看看吧
    2024-06-06
  • 解决layui上传文件提示上传异常,实际文件已经上传成功的问题

    解决layui上传文件提示上传异常,实际文件已经上传成功的问题

    今天小编就为大家分享一篇解决layui上传文件提示上传异常,实际文件已经上传成功的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript实现框架高度随内容改变的方法

    javascript实现框架高度随内容改变的方法

    这篇文章主要介绍了javascript实现框架高度随内容改变的方法,实例分析了通过父页面及内容改变框架高度两种实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js中获取事件对象的方法小结

    js中获取事件对象的方法小结

    事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定
    2011-03-03
  • JS表单提交验证、input(type=number) 去三角 刷新验证码

    JS表单提交验证、input(type=number) 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,下面给大家介绍js表单提交验证input(type=number) 去三角 刷新验证码注意事项,一起看看吧
    2017-06-06
  • 微信小程序文章详情页跳转案例详解

    微信小程序文章详情页跳转案例详解

    这篇文章主要介绍了微信小程序文章详情页跳转案例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论