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

由于map()方法定义在JavaScript的Array中,我们调用Arraymap()方法,传入我们自己的函数,就得到了一个新的Array作为结果:

  1. function pow(x) {
  2. return x * x;
  3. }
  4. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  5. arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

map()传入的参数是pow,即函数对象本身。

你可能会想,不需要map(),写一个循环,也可以计算出结果:

  1. var f = function (x) {
  2. return x * x;
  3. };
  4. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  5. var result = [];
  6. for (var i=0; i<arr.length; i++) {
  7. result.push(f(arr[i]));
  8. }

的确可以,但是,从上面的循环代码,我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。

所以,map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串:

  1. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2. arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

只需要一行代码。

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

  1. [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方说对一个Array求和,就可以用reduce实现:

  1. var arr = [1, 3, 5, 7, 9];
  2. arr.reduce(function (x, y) {
  3. return x + y;
  4. }); // 25

练习:利用reduce()求积:

function product(arr) {

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

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

廖雪峰教程笔记: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. [android]如何使LinearLayout布局从右向左水平排列,而不是从左向右排列

    方法1: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...

  2. 【剑指offer】题目20 顺时针打印矩阵

    输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1   2   3  4 5   6   7  8 9  10 11 12 13 14 15 16 则依次打印出 ...

  3. CCF 最大的矩形

    问题描述 试题编号: 3 试题名称: 最大的矩形 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个 ...

  4. 【XLL API 函数】xlfUnregister (Form 1)

    此函数可以被 Excel 已经载入的 XLL 或 DLL 调用.它等效于宏表函数 UNREGISTER. xlfUnregister 有两种调用形式: 形式1:Unregister 单独的命令或函数 ...

  5. August 13th 2016 Week 33rd Saturday

    What makes life dreary is the want of motive. 没有目标与动力,生活便会郁闷无光. Without dreams and hope, there will ...

  6. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  7. 10.11 cocoapods安装

    手动安装gem 手动下载 rubygem https://rubygems.org/pages/download#formats 10.11 cocoapods安装 sudo gem install ...

  8. 继承下public,protected,private访问权限

    C++中派生类对基类成员的访问形式主要有以下两种: 1.内部访问:由派生类中新增成员对基类继承来的成员的访问. 2.对象访问:在派生类外部,通过派生类的对象对从基类继承来的成员的访问.今天给大家介绍在 ...

  9. 51nod1006(lcs)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 题意:中文题诶- 思路:最长公共子序列模板题- 我们用d ...

  10. Eclipse的使用及Java程序的标识符和关键字

    Eclipse的使用 (1)创建Java项目 选择“文件”/“新建”/“Java项目”命令,在弹出的“新建Java项目”对话框输入项目名,然后点击“下一步”,最后单击“完成”. (2)创建Java类文 ...