我們一直在使用JavaScript的for循環。但現在，在最新的函數式編程技巧的支持下，過時的它應該退休了。

幸運的是，你不必是一個函數式編程大師，也可以做出這個改變。更幸運的是，這就是你在眼前項目中可以立馬做的事情！

那到底JavaScript的for循環有什么問題？

for循環設計本身鼓勵改變狀態以及產生副作用，這兩者都是導致錯誤和不可預知代碼的隱患。

我們都知道全局狀態是糟糕的，應該避免。可是，局部狀態和全局狀態一樣糟糕，只是因為局部狀態處于一個較小的尺度中，沒有引起注意。因此，我們從來沒有真正解決問題，而是盡量把問題最小化。

對于可變的狀態，在一些未知的時間點，變量會因為某些未知的原因而改變。這時，你要花上數小時進行調試，尋找這個值改變的原因。光為這，我都不知道自己掉了多少把頭發了。

下面，我想簡單談談副作用。這個詞聽起來就煩人，副作用……媽蛋！難道你會希望自己的程序有什么副作用？當然不！

但什么是副作用？

當一個函數修改了其作用域以外的某些東西時，它就被視為有副作用。可以是改變一個變量的值、讀取鍵盤輸入、調用某個API、寫入磁盤數據、打印日志，等等。

副作用很強大，但同時也被承擔著重大的責任。

副作用應該盡可能被消除，或者封裝在內部，或可控。有副作用的函數難以測試，也難以推斷，所以要盡你所能甩掉它。幸好這里可以不用擔心副作用。

好了，閑話少說，上代碼。我們看一下這段或許你已經看過上千次典型的for循環：

const cats = [ 
  { name: 'Mojo',    months: 84 }, 
  { name: 'Mao-Mao', months: 34 }, 
  { name: 'Waffles', months: 4 }, 
  { name: 'Pickles', months: 6 } 
] 
 
var kittens = [] 
 
// 典型的拙劣寫法：for循環 
for (var i = 0; i < cats.length; i++) { 
  if (cats[i].months < 7) { 
    kittens.push(cats[i].name) 
  } 
} 
 
console.log(kittens) 

我計劃將這些代碼一步一步重構，讓你清楚地看到將這些代碼轉換成更漂亮的寫法是多么容易。

第一個改變就是把if里的聲明抽象為一個函數：

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語句是個不錯的做法。過濾的著眼點從“小于7個月”轉變為“是一只小貓”非常非常重要。現在，當你再看這段代碼，意圖就變得清晰了。為什么要取得小于7個月的貓？一點都不明確。我們的意圖是找到小貓，所以讓代碼表示出來！

另一個好處是iskitten現在可復用了，而且我們都明白：

讓代碼可復用應該始終是我們的目標之一。

下一個改變就是提取出從對象貓到貓名字的轉換（或者映射）。這個變化對以后更有意義，現在只要相信我就好了：

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的，但轉念一想，還是直接展示引入它們之后的代碼多好理解，更能讓你體會到代碼可讀性的巨大變化：

const isKitten = cat => cat.months < 7 
const getName = cat => cat.name 
 
const kittens = 
  cats.filter(isKitten) 
      .map(getName) 

還要注意，我們已經消除了 kittens.push(...)。不再有可變的狀態，也不再有var!

使用const的代碼有如魔鬼般性感（超過了var和let）。

這里說明下，我們自始至終都可以使用const，因為const并不會使對象本身不可變（這個咱們下次再說）。別急，這里只是在講一個范例，所以先放我一馬！

重構的最后一步就是把過濾和映射方法也提取到一個函數里（為了復用嘛，你懂的）：

整合一起就是這樣：

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) 

你會如何進一步分解這些函數？仔細想想“小于”或者name屬性、map或filter，說不定能有額外的收獲。你還可以研究下函數的復合，收益更大。

原    文：Rethinking JavaScript: Death of the For Loop
譯    文：眾成翻譯
作    者：camiler