举例说明,比如我们有一个函数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

练习:利用reduce()求积:

function product(arr) {

  return arr.reduce(function (x,y) {
      return parseInt(x)*parseInt(y);
      });

}

// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
alert('测试通过!');
}
else {
alert('测试失败!');
}

廖雪峰教程笔记:js中map和reduce的用法的更多相关文章

  1. Js中Map对象的使用

    Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...

  2. 项目中一次排序规则的改动,注意到js中map的遍历的顺序

    背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...

  3. js中substring和substr的用法

    js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数    ...

  4. 【转】Python 中map、reduce、filter函数

    转自:http://www.blogjava.net/vagasnail/articles/301140.html?opt=admin 介绍下Python 中 map,reduce,和filter 内 ...

  5. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  6. Python函数式编程中map()、reduce()和filter()函数的用法

    Python中map().reduce()和filter()三个函数均是应用于序列的内置函数,分别对序列进行遍历.递归计算以及过滤操作.这三个内置函数在实际使用过程中常常和“行内函数”lambda函数 ...

  7. hadoop中map和reduce的数量设置

    hadoop中map和reduce的数量设置,有以下几种方式来设置 一.mapred-default.xml 这个文件包含主要的你的站点定制的Hadoop.尽管文件名以mapred开头,通过它可以控制 ...

  8. js中的this指针的用法

    首先看下面代码: function funcA() { this.name = "hello"; console.log(this.name); this.show = funct ...

  9. Python 爬虫:把廖雪峰教程转换成 PDF 电子书

    写爬虫似乎没有比用 Python 更合适了,Python 社区提供的爬虫工具多得让你眼花缭乱,各种拿来就可以直接用的 library 分分钟就可以写出一个爬虫出来,今天尝试写一个爬虫,将廖雪峰老师的 ...

随机推荐

  1. win7,ubuntu双系统——重装win7后如何恢复ubuntu引导

    磁盘分区——windows 7自带分区工具实现 磁盘分区——PQ硬盘分区魔术师 win7,ubuntu双系统的安装——正式安装 win7,ubuntu双系统的安装——卸载ubuntu 讲述了我的  w ...

  2. Jquery 实现 “下次自动登录” 记住用户名密码功能

    转载自:http://blog.csdn.net/aspnet_lyc/article/details/12030039?utm_source=tuicool&utm_medium=refer ...

  3. yum Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again

    今天使用yum时出现如上问题,解决办法: 1.编辑:/etc/yum.repos.d/epel.repo 将baseurl的注释取消, mirrorlist注释掉,如图:

  4. apache vhost

    httpd.conf: Include "F:/wamp/alias/*" <Directory "F:\wamp\www">    Options ...

  5. 异常处理__try{}__except(EXCEPTION_EXECUTE_HANDLER){}

    在一个函数中不能混合使用 try{}catch(CException *e){} 与 __try{}__except(EXCEPTION_EXECUTE_HANDLER){} 编译时报错 error ...

  6. September 4th 2016 Week 37th Sunday

    The morning crowned the humble cloud with splendor. 晨光为谦逊的白云披上壮丽的光彩. Humility is a virtue. Many famo ...

  7. Mysql tablespace

    对于innodb引擎的独立表空间,参考:http://blog.csdn.net/imzoer/article/details/8287938, 关键有两个变量:innodb_file_per_tab ...

  8. uitableviewcell cell.accessoryType 右箭头

    实现右侧的小灰色箭头  只要将cell的accessoryType属性设置为 UITableViewCellAccessoryDisclosureIndicator就可以了. 代码为:cell.acc ...

  9. Eclipse的各种快捷键

     参考他人总结好的 Eclipse快捷键大全(转载) Ctrl+1 快速修复(最经典的快捷键,就不用多说了)     ---->例如:add unimplement methodCtrl+D:  ...

  10. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...