首頁 > 開發者 > JavaScript
本文介紹了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 < 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代替迴圈的簡單介紹，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
