反思JavaScript：论for循环的死亡

我们一直在使用JavaScript的for循环。但现在，在最新的函数式编程技巧的支持下，过时的它应该退休了。幸运的是，你不必是一个函数式编程大师，也可以做出这个改变。更幸运的是，这就是你在眼前项目中可以立马做的事情！

我们一直在使用JavaScript的for循环。但现在，在最新的函数式编程技巧的支持下，过时的它应该退休了。

幸运的是，你不必是一个函数式编程大师，也可以做出这个改变。更幸运的是，这就是你在眼前项目中可以立马做的事情！

那到底JavaScript的for循环有什么问题？

for循环设计本身鼓励改变状态以及产生副作用，这两者都是导致错误和不可预知代码的隐患。

我们都知道全局状态是糟糕的，应该避免。可是，局部状态和全局状态一样糟糕，只是因为局部状态处于一个较小的尺度中，没有引起注意。因此，我们从来没有真正解决问题，而是尽量把问题最小化。

对于可变的状态，在一些未知的时间点，变量会因为某些未知的原因而改变。这时，你要花上数小时进行调试，寻找这个值改变的原因。光为这，我都不知道自己掉了多少把头发了。

下面，我想简单谈谈副作用。这个词听起来就烦人，副作用……妈蛋！难道你会希望自己的程序有什么副作用？当然不！

但什么是副作用？

当一个函数修改了其作用域以外的某些东西时，它就被视为有副作用。可以是改变一个变量的值、读取键盘输入、调用某个API、写入磁盘数据、打印日志，等等。

副作用很强大，但同时也被承担着重大的责任。

副作用应该尽可能被消除，或者封装在内部，或可控。有副作用的函数难以测试，也难以推断，所以要尽你所能甩掉它。幸好这里可以不用担心副作用。

好了，闲话少说，上代码。我们看一下这段或许你已经看过上千次典型的for循环：

1. const cats = [ 
2.   { name: 'Mojo',    months: 84 }, 
3.   { name: 'Mao-Mao', months: 34 }, 
4.   { name: 'Waffles', months: 4 }, 
5.   { name: 'Pickles', months: 6 } 
6. ] 
7.  
8. var kittens = [] 
9.  
10. // 典型的拙劣写法：for循环 
11. for (var i = 0; i < cats.length; i++) { 
12.   if (cats[i].months < 7) { 
13.     kittens.push(cats[i].name) 
14.   } 
15. } 
16.  
17. console.log(kittens) 

我计划将这些代码一步一步重构，让你清楚地看到将这些代码转换成更漂亮的写法是多么容易。

第一个改变就是把if里的声明抽象为一个函数：

1. const isKitten = cat => cat.months < 7 
2.  
3. var kittens = [] 
4.  
5. for (var i = 0; i < cats.length; i++) { 
6.   if (isKitten(cats[i])) { 
7.     kittens.push(cats[i].name) 
8.   } 
9. } 

通常，抽出if语句是个不错的做法。过滤的着眼点从“小于7个月”转变为“是一只小猫”非常非常重要。现在，当你再看这段代码，意图就变得清晰了。为什么要取得小于7个月的猫？一点都不明确。我们的意图是找到小猫，所以让代码表示出来！

另一个好处是iskitten现在可复用了，而且我们都明白：

让代码可复用应该始终是我们的目标之一。

下一个改变就是提取出从对象猫到猫名字的转换（或者映射）。这个变化对以后更有意义，现在只要相信我就好了：

1. const isKitten = cat => cat.months < 7 
2. const getName = cat => cat.name 
3.  
4. var kittens = [] 
5.  
6. for (var i = 0; i < cats.length; i++) { 
7.   if (isKitten(cats[i])) { 
8.     kittens.push(getName(cats[i])) 
9.   } 
10. } 

我本打算先介绍一下filter和map的，但转念一想，还是直接展示引入它们之后的代码多好理解，更能让你体会到代码可读性的巨大变化：

1. const isKitten = cat => cat.months < 7 
2. const getName = cat => cat.name 
3.  
4. const kittens = 
5.   cats.filter(isKitten) 
6.       .map(getName) 

还要注意，我们已经消除了 kittens.push(...)。不再有可变的状态，也不再有var!

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

这里说明下，我们自始至终都可以使用const，因为const并不会使对象本身不可变（这个咱们下次再说）。别急，这里只是在讲一个范例，所以先放我一马！

重构的最后一步就是把过滤和映射方法也提取到一个函数里（为了复用嘛，你懂的）：

整合一起就是这样：

1. const isKitten = cat => cat.months < 7 
2. const getName = cat => cat.name 
3. const getKittenNames = cats => 
4.   cats.filter(isKitten) 
5.       .map(getName) 
6.  
7. const cats = [ 
8.   { name: 'Mojo',    months: 84 }, 
9.   { name: 'Mao-Mao', months: 34 }, 
10.   { name: 'Waffles', months: 4 }, 
11.   { name: 'Pickles', months: 6 } 
12. ] 
13.  
14. const kittens = getKittenNames(cats) 
15.  
16. console.log(kittens) 

你会如何进一步分解这些函数？仔细想想“小于”或者name属性、map或filter，说不定能有额外的收获。你还可以研究下函数的复合，收益更大。

作者：camiler

来源：51CTO