建站
咨詢
售后
建站咨詢
新聞中心
我們一直在使用JavaScript的for循環(huán)。但現(xiàn)在，在最新的函數(shù)式編程技巧的支持下，過時(shí)的它應(yīng)該退休了。幸運(yùn)的是，你不必是一個(gè)函數(shù)式編程大師，也可以做出這個(gè)改變。更幸運(yùn)的是，這就是你在眼前項(xiàng)目中可以立馬做的事情！
創(chuàng)新互聯(lián)建站致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷，提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷、小程序開發(fā)、公眾號(hào)商城、等建站開發(fā)，創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。
[[183082]]
我們一直在使用JavaScript的for循環(huán)。但現(xiàn)在，在最新的函數(shù)式編程技巧的支持下，過時(shí)的它應(yīng)該退休了。
幸運(yùn)的是，你不必是一個(gè)函數(shù)式編程大師，也可以做出這個(gè)改變。更幸運(yùn)的是，這就是你在眼前項(xiàng)目中可以立馬做的事情！
那到底JavaScript的for循環(huán)有什么問題？
for循環(huán)設(shè)計(jì)本身鼓勵(lì)改變狀態(tài)以及產(chǎn)生副作用，這兩者都是導(dǎo)致錯(cuò)誤和不可預(yù)知代碼的隱患。
我們都知道全局狀態(tài)是糟糕的，應(yīng)該避免?？墒牵植繝顟B(tài)和全局狀態(tài)一樣糟糕，只是因?yàn)榫植繝顟B(tài)處于一個(gè)較小的尺度中，沒有引起注意。因此，我們從來沒有真正解決問題，而是盡量把問題最小化。
對(duì)于可變的狀態(tài)，在一些未知的時(shí)間點(diǎn)，變量會(huì)因?yàn)槟承┪粗脑蚨淖?。這時(shí)，你要花上數(shù)小時(shí)進(jìn)行調(diào)試，尋找這個(gè)值改變的原因。光為這，我都不知道自己掉了多少把頭發(fā)了。
下面，我想簡(jiǎn)單談?wù)劯弊饔?。這個(gè)詞聽起來就煩人，副作用……媽蛋！難道你會(huì)希望自己的程序有什么副作用？當(dāng)然不！
但什么是副作用？
當(dāng)一個(gè)函數(shù)修改了其作用域以外的某些東西時(shí)，它就被視為有副作用?？梢允歉淖円粋€(gè)變量的值、讀取鍵盤輸入、調(diào)用某個(gè)API、寫入磁盤數(shù)據(jù)、打印日志，等等。
副作用很強(qiáng)大，但同時(shí)也被承擔(dān)著重大的責(zé)任。
副作用應(yīng)該盡可能被消除，或者封裝在內(nèi)部，或可控。有副作用的函數(shù)難以測(cè)試，也難以推斷，所以要盡你所能甩掉它。幸好這里可以不用擔(dān)心副作用。
好了，閑話少說，上代碼。我們看一下這段或許你已經(jīng)看過上千次典型的for循環(huán)：
- const cats = [
- { name: 'Mojo', months: 84 },
- { name: 'Mao-Mao', months: 34 },
- { name: 'Waffles', months: 4 },
- { name: 'Pickles', months: 6 }
- ]
- var kittens = []
- // 典型的拙劣寫法：for循環(huán)
- for (var i = 0; i < cats.length; i++) {
- if (cats[i].months < 7) {
- kittens.push(cats[i].name)
- }
- }
- console.log(kittens)
我計(jì)劃將這些代碼一步一步重構(gòu)，讓你清楚地看到將這些代碼轉(zhuǎn)換成更漂亮的寫法是多么容易。
第一個(gè)改變就是把if里的聲明抽象為一個(gè)函數(shù)：
- const isKitten = cat => cat.months < 7
- var kittens = []
- for (var i = 0; i < cats.length; i++) {
- if (isKitten(cats[i])) {
- kittens.push(cats[i].name)
- }
- }
通常，抽出if語句是個(gè)不錯(cuò)的做法。過濾的著眼點(diǎn)從“小于7個(gè)月”轉(zhuǎn)變?yōu)椤笆且恢恍∝垺狈浅７浅Ｖ匾，F(xiàn)在，當(dāng)你再看這段代碼，意圖就變得清晰了。為什么要取得小于7個(gè)月的貓？一點(diǎn)都不明確。我們的意圖是找到小貓，所以讓代碼表示出來！
另一個(gè)好處是iskitten現(xiàn)在可復(fù)用了，而且我們都明白：
讓代碼可復(fù)用應(yīng)該始終是我們的目標(biāo)之一。
下一個(gè)改變就是提取出從對(duì)象貓到貓名字的轉(zhuǎn)換（或者映射）。這個(gè)變化對(duì)以后更有意義，現(xiàn)在只要相信我就好了：
- const isKitten = cat => cat.months < 7
- const getName = cat => cat.name
- var kittens = []
- for (var i = 0; i < cats.length; i++) {
- if (isKitten(cats[i])) {
- kittens.push(getName(cats[i]))
- }
- }
我本打算先介紹一下filter和map的，但轉(zhuǎn)念一想，還是直接展示引入它們之后的代碼多好理解，更能讓你體會(huì)到代碼可讀性的巨大變化：
- const isKitten = cat => cat.months < 7
- const getName = cat => cat.name
- const kittens =
- cats.filter(isKitten)
- .map(getName)
還要注意，我們已經(jīng)消除了 kittens.push(...)。不再有可變的狀態(tài)，也不再有var!
使用const的代碼有如魔鬼般性感（超過了var和let）。
這里說明下，我們自始至終都可以使用const，因?yàn)閏onst并不會(huì)使對(duì)象本身不可變（這個(gè)咱們下次再說）。別急，這里只是在講一個(gè)范例，所以先放我一馬！
重構(gòu)的最后一步就是把過濾和映射方法也提取到一個(gè)函數(shù)里（為了復(fù)用嘛，你懂的）：
整合一起就是這樣：
- const isKitten = cat => cat.months < 7
- const getName = cat => cat.name
- const getKittenNames = cats =>
- cats.filter(isKitten)
- .map(getName)
- const cats = [
- { name: 'Mojo', months: 84 },
- { name: 'Mao-Mao', months: 34 },
- { name: 'Waffles', months: 4 },
- { name: 'Pickles', months: 6 }
- ]
- const kittens = getKittenNames(cats)
- console.log(kittens)
你會(huì)如何進(jìn)一步分解這些函數(shù)？仔細(xì)想想“小于”或者name屬性、map或filter，說不定能有額外的收獲。你還可以研究下函數(shù)的復(fù)合，收益更大。
原 文：Rethinking JavaScript: Death of the For Loop
譯 文：眾成翻譯
作 者：camiler
網(wǎng)站題目：反思JavaScript：論for循環(huán)的死亡
文章轉(zhuǎn)載：http://m.5511xx.com/article/dhiidgs.html
