快捷導(dǎo)航

理解javascript中Map代替循環(huán)

更新時間：2016年02月26日 09:30:05 作者：cangowu

這篇文章主要幫助大家理解javascript中Map代替循環(huán)，感興趣的小伙伴們可以參考一下

本文介紹了map給我們的js編程帶來的好處及便利：
1.Map能干什么
map可以實現(xiàn)for循環(huán)的功能：

<!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里面寫函數(shù)，這樣的話代碼可讀性會大大提高，如下：

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

2.Map的兼容性
ECMAScript 5 標(biāo)準(zhǔn)定義了原生的 map() 方法，所以瀏覽器兼容性較好。如果你想在 IE 9 之前的版本中使用，就需要引入一個 polyfill 或使用 Underscore、Lodash 之類的庫了。
3.map和for哪個快
當(dāng)然，使用for會比map快點，但是差別不是很大，如果對性能要求沒有到極致的地步，這點性能差別可以忽略。

如今，在程序員學(xué)習(xí)過程中基本都會發(fā)現(xiàn)一個叫 map 的函數(shù)。在發(fā)現(xiàn) map 函數(shù)之前，你可能都會使用 for 循環(huán)來處理需要多次執(zhí)行某一行為的場景。一般情況下，在這個循環(huán)過程中都會伴隨一些數(shù)據(jù)變換。

命令式

例如，你團(tuán)隊的銷售人員交給你一個很長的電郵地址列表。這些郵箱地址獲取的時候并沒有經(jīng)過很好地校驗，以至于有些是大寫的，有些是小寫的，還有一些是大小寫混合的。使用 for 循環(huán)進(jìn)行數(shù)據(jù)處理的代碼如下：

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];
 
 for (var i = 0; i &amp;lt; emails.length; i++) {
  lowercaseEmails.push(emails[i].toLowerCase());
 }
 
 return lowercaseEmails;
}
 
var validData = getEmailsInLowercase(mixedEmails);

這樣的做法是有效的，但卻把一個實際上簡單常見的操作變得復(fù)雜。使用 for 循環(huán)的函數(shù)牽扯了很多不必要的細(xì)節(jié)。一些痛點如下：

需要讓程序創(chuàng)建一個臨時列表來存儲復(fù)制的郵件地址值。
需要讓程序先計算列表的長度，以此為次數(shù)訪問一遍列表。
需要讓程序創(chuàng)建一個計數(shù)器用來記錄當(dāng)前訪問的位置。
需要告訴程序計數(shù)的方向，但順序在這里并不重要。

這是命令式的編程方法。我們似乎在口述給電腦該怎么做這件事。

困惑

為了使之前的代碼更加清晰整潔，我們改用 map 函數(shù)。在任何 map 函數(shù)的說明文檔中，我們都會看到諸如 “array”、“each”、“index”之類的詞。這表明，我們可以把 map 當(dāng)做不那么“隆重”的 for 循環(huán)使用，事實上也是可行的?，F(xiàn)在來修改一下之前的代碼：

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 循環(huán)更加清楚。除了代碼量更少，我們也不用再告訴程序去記錄索引和遍歷列表的方向了。

然而，這還不夠好。這樣寫還是命令式的編程。我們還是指揮的太多。實際上我們牽涉了很多不必要的細(xì)節(jié)，似乎都在領(lǐng)著程序的手走每一步。

聲明式

我們需要改變我們關(guān)于數(shù)據(jù)變換的思考方式。我們不需要想著：“電腦啊，我需要你取出列表中第一個元素，然后把它轉(zhuǎn)換成小寫，再存儲到另一個列表中，最后返回這個列表”。相反，我們應(yīng)該這樣想：“電腦，我這有一個混合了大小寫的郵件地址列表，而我需要一個全是小寫的郵件地址列表，這是一個能夠進(jìn)行小寫轉(zhuǎn)換的函數(shù)”。

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function downcase(str) {
 return str.toLowerCase();
}
 
var validData = mixedEmails.map(downcase);

毫無疑問，這種寫法更易懂，同時這才是程序的本質(zhì)：把你的想法告訴其他人，這個人可能是別的程序員或未來的你。上面的代碼在說“有效的數(shù)據(jù)是使用小寫轉(zhuǎn)換函數(shù)映射后的郵箱列表”。

使用類似這樣的高級方式傳遞想法是函數(shù)式編程的核心原則，而我們就在這樣做。將單一功能、易于理解的簡單部分組合起來，由此構(gòu)建復(fù)雜程序。

這樣的寫法還有些額外的好處。下表的排序不分先后：

小寫轉(zhuǎn)換函數(shù)提供了最簡化的接口：單值輸入，單值輸出。
能夠改動的地方不多，所以邏輯更易于理解，也易于測試，而且不易出錯。
邏輯單一，所以易于復(fù)用，并且與其他函數(shù)能夠組合出更復(fù)雜的功能。
沿這樣的聲明式編程路線走的話，代碼量會顯著縮小。

雖然給 map 的第一個參數(shù)傳入匿名函數(shù)很常見，還是建議把函數(shù)提出來并合理命名。這能夠幫你記錄下寫此函數(shù)的意圖，這樣別的開發(fā)者就能通過函數(shù)名了解功能而不用再費(fèi)勁分析代碼了。

瀏覽器支持情況

ECMAScript 5 標(biāo)準(zhǔn)定義了原生的 map() 方法，所以瀏覽器兼容性較好。如果你想在 IE 9 之前的版本中使用，就需要引入一個 polyfill 或使用 Underscore、Lodash 之類的庫了。

性能表現(xiàn)

極大多數(shù)情況下，在實際編碼中 map 函數(shù)和 for 循環(huán)之間沒有明顯的性能差距。for 循環(huán)稍快一些，但如果你不是在寫圖形或物理引擎的話，這點差距沒必要去考慮，當(dāng)然即使如此，除非能夠確定這些性能的提升對你有幫助，否則用這種方式去優(yōu)化意義不大。

總結(jié)

將邏輯分成單一功能的方法并應(yīng)用于數(shù)據(jù)結(jié)構(gòu)上，這種編程方法會讓你的代碼更準(zhǔn)確、魯棒和易于理解。我們的理念就是盡可能通用，通用能夠幫助代碼重用。學(xué)習(xí)這種思考方法，不僅能幫助你提高 Javascript 水平，也能體現(xiàn)在其他多數(shù)編程語言上，例如 Ruby 和 Haskell。

所以，下一次當(dāng)你要使用 for 循環(huán)時，重新考慮一下。記住，你要處理的數(shù)據(jù)并不一定是普通的數(shù)組，你可以去處理對象，取出它的值，再使用函數(shù)去映射，最后整理出結(jié)果數(shù)組。

以上就是關(guān)于map代替循環(huán)的簡單介紹，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: