本文介紹了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 = ['[email protected]', '[email protected]', '[email protected]']; function getEmailsInLowercase(emails) { var lowercaseEmails = []; for (var i = 0; i < emails.length; i++) { lowercaseEmails.push(emails[i].toLowerCase()); } return lowercaseEmails; } var validData = getEmailsInLowercase(mixedEmails);
這樣的做法是有效的，但卻把一個實際上簡單常見的操作變得復雜。使用 for 循環的函數牽扯了很多不必要的細節。一些痛點如下：
這是命令式的編程方法。我們似乎在口述給電腦該怎麼做這件事。
困惑
為了使之前的代碼更加清晰整潔，我們改用 map 函數。在任何 map 函數的說明文檔中，我們都會看到諸如 “array”、“each”、“index”之類的詞。這表明，我們可以把 map 當做不那麼“隆重”的 for 循環使用，事實上也是可行的。現在來修改一下之前的代碼：
var mixedEmails = ['[email protected]', '[email protected]', '[email protected]']; function getEmailsInLowercase(emails) { var lowercaseEmails = []; emails.map(function(email) { lowercaseEmails.push(email.toLowerCase()); }); return lowercaseEmails; } var validData = getEmailsInLowercase(mixedEmails);
這樣寫不僅能用，而且代碼比使用 for 循環更加清楚。除了代碼量更少，我們也不用再告訴程序去記錄索引和遍歷列表的方向了。
然而，這還不夠好。這樣寫還是命令式的編程。我們還是指揮的太多。實際上我們牽涉了很多不必要的細節，似乎都在領著程序的手走每一步。
聲明式
我們需要改變我們關於數據變換的思考方式。我們不需要想著：“電腦啊，我需要你取出列表中第一個元素，然後把它轉換成小寫，再存儲到另一個列表中，最後返回這個列表”。相反，我們應該這樣想：“電腦，我這有一個混合了大小寫的郵件地址列表，而我需要一個全是小寫的郵件地址列表，這是一個能夠進行小寫轉換的函數”。
var mixedEmails = ['[email protected]', '[email protected]', '[email protected]']; 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代替循環的簡單介紹，希望對大家的學習有所幫助。