没有循环的JavaScript

有些文章中提到过，缩进（并不能特别准确的）说明了代码的复杂程度。我们想要的是简单的JavaScript。之所以层层缩进，是因为我们用抽象的方式解决问题。但要选用什么抽象方法呢？截止目前，我们没有在特定环境中说明该使用什么样的方法。本文将关注如何在摆脱循环的情况下使用数组。最终的结果当然是更简单可读的代码。

 

“……循环是个不可避免的结构，而且不好复用，同时循环还很难加入其他操作中。更麻烦的是，使用循环就意味着在每一个新的迭代中有更多变化需要响应”——Luis Atencio

 

循环

 

类似循环一样的控制结构会让代码变得复杂。但目前并没有什么证据能证明它。现在让我们看看JavaScript中的循环是如何工作的。

 

在JavaScript中，我们至少有4到5种循环的方法。最基本的要数while循环。开始之前我们先写一个示例函数和数组方便我们说明：

 

现在我们有了一个数组，来用oodify处理它。当我们使用while时，循环应该这样写：

 

请注意，为了知道我们所在的位置，我用了计数器i。首先将计数器初始化清零，之后在每次循环中加1计数。同时，我们还要比较i和数组长度，这样才能知道什么时候停止循环。JavaScript提供另外一个和它差不多，而且更简单的写法：for循环。用for循环可以这样写：

 

for循环是个很有用的结构，因为它可以将计数器的逻辑都包含在顶部，这是个很不错的改进。当我们使用while循环时，很容易就忘了写i的加1计数，然后造成无限循环。现在我们来看看这段代码的作用。我们试图对数组中的每个元素调用oodlify()，然后将结果存入新的数组。事实上我们不太想自己操作计数器。

 

这种对每一个数组元素做处理的方式十分常见。所以在ES2015中，提供了一个可以不用在意计数器的新的循环结构：for…of循环。每一轮循环它都会将数组中的下一个元素传给你。它看上去是这样的：

 

这个方法看上去简单很多。可以注意到计数器以及比较数组长度的过程都不见了。我们甚至不用自己将元素从数组中取出。for…of循环干了所有脏活累活。如果我们用for…of循环替代所有的for循环，就会取得很大进步。现在我们已经让代码变得更简单，但我们的目标不止如此。

 

映射（Mapping）

 

for…of循环要比for循环简单的多，但还是需要一些手动配置。首先需要初始化output数组，还要在每层循环中调用push()函数。如果能解决代码中一些现有的问题，还可以将代码变得更清晰明了，其存在的问题是：

如果有两个数组都需要调用oodlify怎么办？

 

首先想到的应该是对两个数组都用循环：

 

这固然有用。而且好处大于坏处。但这个方法重复使用了太多次——不是特别清爽。现在我们要去除一些重复来将它重构，先写一个函数：

 

看上去是不是好些了，但如果我们还有想要的函数怎么办？

 

这种情况下oodlifyArray()函数就帮不上什么忙了。如果我们创建一个izzlifyArrya()函数,这就又走了那个不断重复的老路。不管怎样，先试试，我们好看看到底是什么效果：

 

可以看出这两个函数功能惊人的相似。那如果我们可以将其中的模式抽象出来会怎样？事实上，我们想要的是：对于给出的数组和函数，将数组中的每个元素映射到新的数组中。然后把函数作用在每个元素上。我们把这种情况称为模式映射。数组的映射函数长这样：

 

这个方法还是没有完全摆脱循环。如果我们想要摆脱循环，那就需要写一个递归的版本：

 

递归的方法好像挺高级。只需要两行代码，没什么缩进。但一般来说，我们不怎么用递归的方法，因为它在老版本浏览器上性能不怎么样。而且事实上，我们并不需要自己去写映射函数（除非你想这么做）。映射函数实际上非常常见，所以JavaScript为我们提供了一个创建映射的方法。用映射方法，代码看上去是这样的：

 

注意到这种写法完全没有缩进。完全没有循环。事实上，其内部某些地方确实存在循环，但这完全不是我们需要关心的。这下代码看上去就非常的简单了。

 

那为什么这样写看上去特别简单呢？这个问题似乎特别蠢，但请仔细想想。是因为它特别短吗？答案是否定的。仅仅因为代码量少并不代表它简单。它看起来简单是因为我们把他们分开了。有两个函数来处理字符串：oofligy和izzlify。这些函数与数组或循环无关。另一个函数map会处理数组。但map不会管数组中的数据是什么类型，或你想用这些数据干什么。它只是在调用我们传给他的函数。和把所有东西混在一块不一样，我们将字符串的处理过程和数组的处理分开。这就是代码简单的原因。

 

精简（Reducing）

 

现在map这个函数非常便利，但它没办法覆盖我们需要的所有循环。它只在你想要创建一个和输入一样长的数组才有用。那如果我们想增加数组元素数量怎么办？或是想要在列表中找出最短的字符串。还有些时候我们想处理一个数组或将其元素减至一个。

 

现在来看个例子。假如我们有一个英雄对象的数组：

 

我们想找到最强壮的英雄。使用for循环，过程是这样：

 

代码看上去不错，它将所有事情考虑了进去。当我们开始循环的时候，始终可以从strongest中获取当前循环中最强壮的英雄。那新的问题来了，假设我们想知道所有英雄加起来有多强。

 

两个例子中，我们在开始循环之前都先初始化了一个变量。然后每一次循环中，都从数组中去取出一个值，然后更新这个变量。为了使循环更加简洁，我们从循环中提取因子然后使用函数。同时，我们将重新命名一些变量。

 

这样写的话，两个循环看上去就非常相近。两者的区别仅仅存在于函数名和初始值上。两个方法都将数组的元素减至一个。因而我们可以创建一个reduce函数来继续压缩这个模式。

 

JavaScript在reduce上为数组提供一种如map一样内嵌的方法。这样我们就不用自己写相关的方法了。使用内嵌的方法，代码应该是这样的：

 

如果大家有仔细阅读本文，你应该发现这段代码并不是最短的。使用数组内嵌的方法，我们也就减少了一行代码。但我们的目标是尽量减少函数的复杂性，而不是追求更少的代码量。那这样写到底有没有减少复杂性呢？答案是肯定的。将代码从独立处理元素的过程中分离，令其单独处理循环。这样代码就减少了一些复杂性。

 

过滤（Filtering）

 

我们首先使用map可以对数组中的每个元素进行操作。同时我们用reduce将数组减至一个元素。那如果我们想从数组中提取某些元素该怎么办？为了继续研究，来稍微扩充一下我们之前的数据：

 

现在面前有两个目标：

• 找到所有女英雄；

• 找到那些力量值大于500的英雄

 

先用老方法for循环，可以这样写：

 

这段代码挺不错的，它考虑到了所有的内容。但其中绝对有一些重复的模式。事实上，唯一改变的就是那个if条件申明。那现在将if拿出来单独作为函数。

 

这个的函数只会返回true或false，它有时被称为predicate。我们使用predicate来决定到底要不要保留heroes中的元素。

 

这样的写法让代码变得更长了。如果我们将predicate函数提取出来，提取后的版本变得清晰无比。我们用提取的部分创建函数。

 

和map，reduce一样，JavaScript为我们提供的也是数组方法。所以我们不用来自己多写什么（除非你想要这样做）。使用数组方法，代码变成了：

 

为什么这样比使用for循环强太多？思考一下我们是如何在例子中使用的。我们最初的问题是如何找出符合条件的英雄。当我们用filter函数解决了这个问题后，剩下的工作轻松无比。我们写了一个简单的函数，用它告诉filter函数哪些元素需要保留。最后我们写了一个非常简单的predicate函数，就不用考虑数组或变量了。

 

与其他方法相比，使用filter能传递更多信息，并且使用了更少的空间。完全没必要熟悉所有循环后来实现过滤。只需要写一个方法调用即可。

 

查找（Finding）

 

Filtering用起来很方便，但如果我们只想找一位英雄呢？假设我们要找到Black Widow。当使用filter函数：

 

这样写效率不高。filter需要查看数组中的每个元素。但我们知道只有一个Black Widow，完全可以在找到一个Black Widow后结束查找。predicate函数的用法是非常灵活的。我们可以来写一个find函数以返回匹配到的第一个元素。

 

和之前一样，JavaScript可以包办全部，我们不用自己创建什么复杂函数：

 

最终我们用较少的文字表达了更多内容。用find函数解决了之前查找特定元素的问题，现在有一个新的疑问：我怎么知道是找到特定的元素就结束还是遍历整个数组。然而这并不是我们要关心的内容！

 

小结：

 

从这些迭代函数中不难看出抽象思维的价值。假设我们用内嵌数组的方法处理一切问题。在每个案例中我们都完成了三件事：

• 剔除循环控制结构，增强代码可读性；

• 用现有的方法来归纳例子中的模式；

• 明确我们到底要对数组中的元素做什么操作。

 

在每个例子中，我们都用小而纯粹的函数将问题分解。真正重要的就是这四种模式（也有其他方法，但我推荐这四种），用它们你几乎可以淘汰JavaScript中所有的循环了。这是因为几乎JavaScript中所有的循环都是来处理数组，或创建数组的。在减少循环的过程中，我们不但减少了代码的复杂性，同时也增强了代码的可维护性。