理解javascript中Map代替循环

本文介绍了map给我们的js编程带来的好处及便利：
1.Map能干什么
map可以实现for循环的功能：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body> 

<script> 

 var arr = ['val1', 'val2', 'val3']; 

 for(var i = 0; i < arr.length; i++){
  console.log(arr[i]);
  console.log(i);
  console.log(arr);
 }
 arr.map(function(val, index, array) {
  console.log(val);
  console.log(index);
  console.log(array);
 }); 

</script> 

</body>
</html>

这里的好处是，我们可以随意在map里面写函数，这样的话代码可读性会大大提高，如下：

 function output(val, index, array) {
  console.log(val);
  console.log(index);
  console.log(array);
 } 

 arr.map(output);

2.Map的兼容性
ECMAScript 5 标准定义了原生的 map() 方法，所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用，就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。
3.map和for哪个快
当然，使用for会比map快点，但是差别不是很大，如果对性能要求没有到极致的地步，这点性能差别可以忽略。

如今，在程序员学习过程中基本都会发现一个叫 map 的函数。在发现 map 函数之前，你可能都会使用 for 循环来处理需要多次执行某一行为的场景。一般情况下，在这个循环过程中都会伴随一些数据变换。

命令式

例如，你团队的销售人员交给你一个很长的电邮地址列表。这些邮箱地址获取的时候并没有经过很好地校验，以至于有些是大写的，有些是小写的，还有一些是大小写混合的。使用 for 循环进行数据处理的代码如下：

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];

 for (var i = 0; i &lt; emails.length; i++) {
  lowercaseEmails.push(emails[i].toLowerCase());
 }

 return lowercaseEmails;
}

var validData = getEmailsInLowercase(mixedEmails);

这样的做法是有效的，但却把一个实际上简单常见的操作变得复杂。使用 for 循环的函数牵扯了很多不必要的细节。一些痛点如下：

  • 需要让程序创建一个临时列表来存储复制的邮件地址值。
  • 需要让程序先计算列表的长度，以此为次数访问一遍列表。
  • 需要让程序创建一个计数器用来记录当前访问的位置。
  • 需要告诉程序计数的方向，但顺序在这里并不重要。

这是命令式的编程方法。我们似乎在口述给电脑该怎么做这件事。

困惑

为了使之前的代码更加清晰整洁，我们改用 map 函数。在任何 map 函数的说明文档中，我们都会看到诸如 “array”、“each”、“index”之类的词。这表明，我们可以把 map 当做不那么“隆重”的 for 循环使用，事实上也是可行的。现在来修改一下之前的代码：

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];

 emails.map(function(email) {
  lowercaseEmails.push(email.toLowerCase());
 });

 return lowercaseEmails;
}

var validData = getEmailsInLowercase(mixedEmails);

这样写不仅能用，而且代码比使用 for 循环更加清楚。除了代码量更少，我们也不用再告诉程序去记录索引和遍历列表的方向了。

然而，这还不够好。这样写还是命令式的编程。我们还是指挥的太多。实际上我们牵涉了很多不必要的细节，似乎都在领着程序的手走每一步。

声明式

我们需要改变我们关于数据变换的思考方式。我们不需要想着：“电脑啊，我需要你取出列表中第一个元素，然后把它转换成小写，再存储到另一个列表中，最后返回这个列表”。相反，我们应该这样想：“电脑，我这有一个混合了大小写的邮件地址列表，而我需要一个全是小写的邮件地址列表，这是一个能够进行小写转换的函数”。

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function downcase(str) {
 return str.toLowerCase();
}

var validData = mixedEmails.map(downcase);

毫无疑问，这种写法更易懂，同时这才是程序的本质：把你的想法告诉其他人，这个人可能是别的程序员或未来的你。上面的代码在说“有效的数据是使用小写转换函数映射后的邮箱列表”。

使用类似这样的高级方式传递想法是函数式编程的核心原则，而我们就在这样做。将单一功能、易于理解的简单部分组合起来，由此构建复杂程序。

这样的写法还有些额外的好处。下表的排序不分先后：

  • 小写转换函数提供了最简化的接口：单值输入，单值输出。
  • 能够改动的地方不多，所以逻辑更易于理解，也易于测试，而且不易出错。
  • 逻辑单一，所以易于复用，并且与其他函数能够组合出更复杂的功能。
  • 沿这样的声明式编程路线走的话，代码量会显著缩小。

虽然给 map 的第一个参数传入匿名函数很常见，还是建议把函数提出来并合理命名。这能够帮你记录下写此函数的意图，这样别的开发者就能通过函数名了解功能而不用再费劲分析代码了。

浏览器支持情况

ECMAScript 5 标准定义了原生的 map() 方法，所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用，就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。

性能表现

极大多数情况下，在实际编码中 map 函数和 for 循环之间没有明显的性能差距。for 循环稍快一些，但如果你不是在写图形或物理引擎的话，这点差距没必要去考虑，当然即使如此，除非能够确定这些性能的提升对你有帮助，否则用这种方式去优化意义不大。

总结

将逻辑分成单一功能的方法并应用于数据结构上，这种编程方法会让你的代码更准确、鲁棒和易于理解。我们的理念就是尽可能通用，通用能够帮助代码重用。学习这种思考方法，不仅能帮助你提高 Javascript 水平，也能体现在其他多数编程语言上，例如 Ruby 和 Haskell。

所以，下一次当你要使用 for 循环时，重新考虑一下。记住，你要处理的数据并不一定是普通的数组，你可以去处理对象，取出它的值，再使用函数去映射，最后整理出结果数组。

以上就是关于map代替循环的简单介绍，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • c语言判断是否素数程序代码

    复制代码 代码如下: #include <stdio.h> bool isPrimeNum(int x){    if (x == 1)        return false;    else if (x <= 0)        return false;    else if (x == 2)        return true;    else    {        for (int i = 2; i < x; i++)        {            if (

  • javascript每日必学之循环

    javascript每日必学之循环

    朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo

  • 使用c语言判断100以内素数的示例(c语言求素数)

    从console输入一个数,判断这个数是否为素数(质数). 复制代码 代码如下: #include <stdio.h> /**判断100以内的素数*/ //定义函数判断是否是素数int isPrime(int num ){    int i;    //从2开始循环,一直到i的平方小于等于给定的数.    for (i = 2; i*i <= num; i++) {        if ( ( num % i ) == 0 ) {            return 0;       

  • C语言小程序 如何判断两个日期之差

    1.普通的写法 复制代码 代码如下: #include <stdio.h>int leapyear(int year){ if((year%4==0 && year%100!=0) || year%400==0)  return 1; else   return 0;}int days(int *day1, int *day2){ int i=0; int *tmp; int diff = 0; const int month[13]={0,31,28,31,30,31,30,

  • C语言使用普通循环方法和递归求斐波那契序列示例代码

    复制代码 代码如下: #include <stdio.h> int fac(int x); int main(void){    int n;    scanf("%d", &n);    if (n == 1 || n == 2)        printf("1\n");    else if (n == 3)        printf("2\n");    else    {        int last = 1; 

  • 用C语言程序判断大小端模式

    用C语言程序判断大小端模式

    1.大端模式,是指数据的低位保存在内存的高地址中,而数据的高位,保存在内存的低地址中:小端模式相反 2.为什么有大小端之分??? 因为在计算机系统中,存储是以字节为单位的,每个地址单元都对应着一个字节,一个字节=8bit.在C语言中除了8bit的char之外,还有16bit的short型,32bit的long型(要看具体的编译器).对于位数大于8位的处理器,例如16位或者32位的处理器,由于寄存器宽度大于一个字节,如何安排多个字节的存储,这就有了大端存储模式和小端存储模式 3.各自的优势: 小端

  • C语言单循环链表的表示与实现实例详解

    C语言单循环链表的表示与实现实例详解

    1.概述: 对于一个循环链表来说,其首节点和末节点被连接在一起.这种方式在单向和双向链表中皆可实现.要转换一个循环链表,可以选择开始于任意一个节点然后沿着列表的任一方向直到返回开始的节点.再来看另一种方法,循环链表可以被视为"无头无尾".这种列表很利于节约数据存储缓存, 假定你在一个列表中有一个对象并且希望所有其他对象迭代在一个非特殊的排列下. 指向整个列表的指针可以被称作访问指针. 用单向链表构建的循环链表 循环链表中第一个节点之前就是最后一个节点,反之亦然.循环链表的无边界使得在这

  • 用C语言判断字符是否为空白字符或特殊字符的方法

    C语言isspace()函数:判断字符是否为空白字符 头文件: #include <ctype.h> 定义函数: int isspace(int c); 函数说明:检查参数c是否为空格字符,也就是判断是否为空格(' ').定位字符(' \t ').CR(' \r ').换行(' \n ').垂直定位字符(' \v ')或翻页(' \f ')的情况. 返回值:若参数c 为空白字符,则返回非 0,否则返回 0. 附加说明:此为宏定义,非真正函数. 范例:将字符串str[]中内含的空格字符找出,并显

  • C语言中判断int,long型等变量是否赋值的方法详解

    C语言中判断int,long型等变量是否赋值的方法详解

    当然,如果你不赋值给局部变量,这样会导致整个程序的崩溃,因为,它的内容被系统指向了垃圾内存.下面我们看一段代码: 复制代码 代码如下: #include <stdio.h>#include <string.h>#include <stdlib.h>int globle_value;int my_sum(int value1, int value2);long my_sub(long value1, long value2);int main(void){ int aut

  • C语言小程序 如何判断三角型类型

    复制代码 代码如下: #include <stdio.h>#include <stdlib.h>#define EPSINON  1e-3#define ABS(a)  (((a)>0)?(a):(-a)) //?:不支持表达式嵌套#define ZERO(x)  ((x)>-EPSINON && (x)<EPSINON)#define MAX(a,b) (((a)>(b))?(a):(b))#define MIN(a,b) (((a)<

  • JavaScript中循环遍历Array与Map的方法小结

    js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET

  • 详解C语言 三大循环 四大跳转 和判断语句

    三大循环for while 和 do{ }while; 四大跳转 : 无条件跳转语句 go to; 跳出循环语句 break; 继续跳出循环语句 continue; 返回值语句 return 判断语句 if,if else,if else if else if...else ifelse 组合 if(0 == x) if(0 == y) error(): else{ //program code } else到底与那个if配对 C语言有这样的规定: else 始终与同一括号内最近的未匹配的if语

  • C语言循环队列的表示与实现实例详解

    1.概述: C语言的队列(queue),是先进先出(FIFO, First-In-First-Out)的线性表数据结构.在具体应用中通常用链表或者数组来实现.队列只允许在后端(称为rear)进行插入操作,在前端(称为front)进行删除操作. 循环队列可以更简单的防止伪溢出的发生,但是队列大小是固定的. 2.实例代码: /* 队列的顺序存储结构(循环队列) */ #define MAX_QSIZE 5 /* 最大队列长度+1 */ typedef struct { QElemType *base

随机推荐