理解javascript中Map代替循環(huán)
本文介紹了map給我們的js編程帶來(lái)的好處及便利：
1.Map能干什么
map可以實(shí)現(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里面寫(xiě)函數(shù)，這樣的話代碼可讀性會(huì)大大提高，如下：
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 之前的版本中使用，就需要引入一個(gè) polyfill 或使用 Underscore、Lodash 之類(lèi)的庫(kù)了。
3.map和for哪個(gè)快
當(dāng)然，使用for會(huì)比map快點(diǎn)，但是差別不是很大，如果對(duì)性能要求沒(méi)有到極致的地步，這點(diǎn)性能差別可以忽略。
如今，在程序員學(xué)習(xí)過(guò)程中基本都會(huì)發(fā)現(xiàn)一個(gè)叫 map 的函數(shù)。在發(fā)現(xiàn) map 函數(shù)之前，你可能都會(huì)使用 for 循環(huán)來(lái)處理需要多次執(zhí)行某一行為的場(chǎng)景。一般情況下，在這個(gè)循環(huán)過(guò)程中都會(huì)伴隨一些數(shù)據(jù)變換。
命令式
例如，你團(tuán)隊(duì)的銷(xiāo)售人員交給你一個(gè)很長(zhǎng)的電郵地址列表。這些郵箱地址獲取的時(shí)候并沒(méi)有經(jīng)過(guò)很好地校驗(yàn)，以至于有些是大寫(xiě)的，有些是小寫(xiě)的，還有一些是大小寫(xiě)混合的。使用 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 &lt; emails.length; i++) {
lowercaseEmails.push(emails[i].toLowerCase());
}
return lowercaseEmails;
}
var validData = getEmailsInLowercase(mixedEmails);
這樣的做法是有效的，但卻把一個(gè)實(shí)際上簡(jiǎn)單常見(jiàn)的操作變得復(fù)雜。使用 for 循環(huán)的函數(shù)牽扯了很多不必要的細(xì)節(jié)。一些痛點(diǎn)如下：
- 需要讓程序創(chuàng)建一個(gè)臨時(shí)列表來(lái)存儲(chǔ)復(fù)制的郵件地址值。
- 需要讓程序先計(jì)算列表的長(zhǎng)度，以此為次數(shù)訪問(wèn)一遍列表。
- 需要讓程序創(chuàng)建一個(gè)計(jì)數(shù)器用來(lái)記錄當(dāng)前訪問(wèn)的位置。
- 需要告訴程序計(jì)數(shù)的方向，但順序在這里并不重要。
這是命令式的編程方法。我們似乎在口述給電腦該怎么做這件事。
困惑
為了使之前的代碼更加清晰整潔，我們改用 map 函數(shù)。在任何 map 函數(shù)的說(shuō)明文檔中，我們都會(huì)看到諸如 “array”、“each”、“index”之類(lèi)的詞。這表明，我們可以把 map 當(dāng)做不那么“隆重”的 for 循環(huán)使用，事實(shí)上也是可行的?，F(xiàn)在來(lái)修改一下之前的代碼：
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);
這樣寫(xiě)不僅能用，而且代碼比使用 for 循環(huán)更加清楚。除了代碼量更少，我們也不用再告訴程序去記錄索引和遍歷列表的方向了。
然而，這還不夠好。這樣寫(xiě)還是命令式的編程。我們還是指揮的太多。實(shí)際上我們牽涉了很多不必要的細(xì)節(jié)，似乎都在領(lǐng)著程序的手走每一步。
聲明式
我們需要改變我們關(guān)于數(shù)據(jù)變換的思考方式。我們不需要想著：“電腦啊，我需要你取出列表中第一個(gè)元素，然后把它轉(zhuǎn)換成小寫(xiě)，再存儲(chǔ)到另一個(gè)列表中，最后返回這個(gè)列表”。相反，我們應(yīng)該這樣想：“電腦，我這有一個(gè)混合了大小寫(xiě)的郵件地址列表，而我需要一個(gè)全是小寫(xiě)的郵件地址列表，這是一個(gè)能夠進(jìn)行小寫(xiě)轉(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);
毫無(wú)疑問(wèn)，這種寫(xiě)法更易懂，同時(shí)這才是程序的本質(zhì)：把你的想法告訴其他人，這個(gè)人可能是別的程序員或未來(lái)的你。上面的代碼在說(shuō)“有效的數(shù)據(jù)是使用小寫(xiě)轉(zhuǎn)換函數(shù)映射后的郵箱列表”。
使用類(lèi)似這樣的高級(jí)方式傳遞想法是函數(shù)式編程的核心原則，而我們就在這樣做。將單一功能、易于理解的簡(jiǎn)單部分組合起來(lái)，由此構(gòu)建復(fù)雜程序。
這樣的寫(xiě)法還有些額外的好處。下表的排序不分先后：
- 小寫(xiě)轉(zhuǎn)換函數(shù)提供了最簡(jiǎn)化的接口：?jiǎn)沃递斎耄瑔沃递敵觥?/strong>
- 能夠改動(dòng)的地方不多，所以邏輯更易于理解，也易于測(cè)試，而且不易出錯(cuò)。
- 邏輯單一，所以易于復(fù)用，并且與其他函數(shù)能夠組合出更復(fù)雜的功能。
- 沿這樣的聲明式編程路線走的話，代碼量會(huì)顯著縮小。
雖然給 map 的第一個(gè)參數(shù)傳入匿名函數(shù)很常見(jiàn)，還是建議把函數(shù)提出來(lái)并合理命名。這能夠幫你記錄下寫(xiě)此函數(shù)的意圖，這樣別的開(kāi)發(fā)者就能通過(guò)函數(shù)名了解功能而不用再費(fèi)勁分析代碼了。
瀏覽器支持情況
ECMAScript 5 標(biāo)準(zhǔn)定義了原生的 map() 方法，所以瀏覽器兼容性較好。如果你想在 IE 9 之前的版本中使用，就需要引入一個(gè) polyfill 或使用 Underscore、Lodash 之類(lèi)的庫(kù)了。
性能表現(xiàn)
極大多數(shù)情況下，在實(shí)際編碼中 map 函數(shù)和 for 循環(huán)之間沒(méi)有明顯的性能差距。for 循環(huán)稍快一些，但如果你不是在寫(xiě)圖形或物理引擎的話，這點(diǎn)差距沒(méi)必要去考慮，當(dāng)然即使如此，除非能夠確定這些性能的提升對(duì)你有幫助，否則用這種方式去優(yōu)化意義不大。
總結(jié)
將邏輯分成單一功能的方法并應(yīng)用于數(shù)據(jù)結(jié)構(gòu)上，這種編程方法會(huì)讓你的代碼更準(zhǔn)確、魯棒和易于理解。我們的理念就是盡可能通用，通用能夠幫助代碼重用。學(xué)習(xí)這種思考方法，不僅能幫助你提高 Javascript 水平，也能體現(xiàn)在其他多數(shù)編程語(yǔ)言上，例如 Ruby 和 Haskell。
所以，下一次當(dāng)你要使用 for 循環(huán)時(shí)，重新考慮一下。記住，你要處理的數(shù)據(jù)并不一定是普通的數(shù)組，你可以去處理對(duì)象，取出它的值，再使用函數(shù)去映射，最后整理出結(jié)果數(shù)組。
以上就是關(guān)于map代替循環(huán)的簡(jiǎn)單介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。
- 用C語(yǔ)言程序判斷大小端模式
- C語(yǔ)言中判斷int,long型等變量是否賦值的方法詳解
- C語(yǔ)言小程序 如何判斷兩個(gè)日期之差
- C語(yǔ)言小程序 如何判斷三角型類(lèi)型
- C語(yǔ)言使用普通循環(huán)方法和遞歸求斐波那契序列示例代碼
- c語(yǔ)言判斷是否素?cái)?shù)程序代碼
- 使用c語(yǔ)言判斷100以內(nèi)素?cái)?shù)的示例(c語(yǔ)言求素?cái)?shù))
- C語(yǔ)言單循環(huán)鏈表的表示與實(shí)現(xiàn)實(shí)例詳解
- C語(yǔ)言循環(huán)隊(duì)列的表示與實(shí)現(xiàn)實(shí)例詳解
- 用C語(yǔ)言判斷字符是否為空白字符或特殊字符的方法
- javascript每日必學(xué)之循環(huán)
- JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
- 詳解C語(yǔ)言 三大循環(huán) 四大跳轉(zhuǎn) 和判斷語(yǔ)句
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之輸入框組(input-group),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時(shí)間函數(shù)控制頁(yè)面元素樣式動(dòng)態(tài)變換的技巧,需要的朋友可以參考下2015-12-12
ECharts儀表盤(pán)實(shí)例代碼(附源碼下載)
大家在汽車(chē)駕駛艙里一眼就可以看到儀表盤(pán)，使用使用Echarts制作的儀表盤(pán)可以輕松展示用戶的數(shù)據(jù)，清晰的看出某個(gè)指標(biāo)值所在的范圍，儀表盤(pán)形式的報(bào)表應(yīng)用在各種統(tǒng)計(jì)系統(tǒng)中，本文結(jié)合實(shí)例講解儀表盤(pán)在銷(xiāo)售任務(wù)完成率的統(tǒng)計(jì)應(yīng)用2016-02-02
這篇文章主要為大家分享了js滑動(dòng)提示效果代碼，實(shí)現(xiàn)方法簡(jiǎn)單，感興趣的小伙伴們可以參考一下2016-03-03
解決echarts官網(wǎng)打不開(kāi)訪問(wèn)失敗的問(wèn)題
這篇文章主要介紹了解決echarts官網(wǎng)打不開(kāi)訪問(wèn)失敗的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
繼續(xù)上一部分，我們要看一下顏色?；鸷孟癫还苋叨欢紩?huì)轉(zhuǎn)變?yōu)閞gb格式，不過(guò)我們通常比較習(xí)慣的是hex格式。這就用到以下兩函數(shù)。2010-01-01
下面小編就為大家?guī)?lái)一篇老生常談Bootstrap媒體對(duì)象。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
javascript中attachEvent用法實(shí)例分析
這篇文章主要介紹了javascript中attachEvent用法,實(shí)例分析了javascript中事件綁定的相關(guān)技巧,需要的朋友可以參考下2015-05-05
layui+ssm實(shí)現(xiàn)數(shù)據(jù)批量刪除功能
本篇文章給大家介紹layui+ssm實(shí)現(xiàn)數(shù)據(jù)批量刪除功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
echarts多條折線圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05