理解javascript中Map取代循環_javascript技巧-js教程-PHP中文網

本文介绍了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取代循環的簡單介紹，希望對大家的學習有所幫助。