理解javascript中Map代替循环

2024-05-06 15:00:46

字体：大中小

来源：转载

供稿：网友

本文介绍了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 循环使用，事实上也是可行的。现在来修改一下之前的代码：

上一篇：详解Javascript中的Object对象

下一篇：Javascript中Date类型和Math类型详解