理解javascript中Map代替循環

2019-11-20 10:30:16

字體：大中小

來源：轉載

供稿：網友

本文介紹了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);

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

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

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