无循环 JavaScript(map、reduce、filter和find)

之前有讨论过,。我们的目标是写出复杂度低的 JavaScript 代码。通过选择一种合适的抽象来解决这个问题,可是你怎么能知道选择哪一种抽象呢?很遗憾的是到目前为止,没有找到一个具体的例子能回答这个问题。这篇文章中我们讨论不用任何循环如何处理 JavaScript 数组,最终得出的效果是可以降低代码复杂性。

循环是一种很重要的控制结构,它很难被重用,也很难插入到其他操作之中。另外,它意味着随着每次迭代,代码也在不断的变化之中。——Luis Atencio

我们先前说过,像循环这样的控制结构引入了复杂性。但是也没有给出确切的证据证明这一点,我们先看看 JavaScript 中循环的工作原理。

循环

在 JavaScript 中,至少有四、五种实现循环的方法,最基础的是 while 循环。我们首先先创建一个示例函数和数组:

// oodlify :: String -> String function oodlify(s) { return s.replace(/[aeiou]/g, 'oodle'); } const input = [ 'John', 'Paul', 'George', 'Ringo', ];

现在有了一个数组,我们想要用 oodlify 函数处理每一个元素。如果用 while 循环,就类似于这样:

let i = 0; const len = input.length; let output = []; while (i < len) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); i = i + 1; }

注意这里发生的事情,我们用了一个初始值为 0 的计数器 i,每次循环都会自增。而且每次循环中都和 len 进行比较以保证循环特定次数以后终止循环。这种利用计数器进行循环控制的模式太常用了,所以 JavaScript 提供了一种更加简洁的写法: for 循环,写起来如下:

const len = input.length; let output = []; for (let i = 0; i < len; i = i + 1) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); }

这一结构非常有用,while循环非常容易把自增的 i 给忘掉,进而引起无限循环;而for循环把和计数器相关的代码都放到了上面,这样你就不会忘掉自增 i,这确实是一个很好的改进。现在回到原来的问题,我们目标是在数组的每个元素上运行 oodlify() 函数,并且将结果放到一个新的数组中。

对一个数组中每个元素都进行操作的这种模式也是非常普遍的。因此在 ES2015 中,引入了一种新的循环结构可以把计数器也简化掉: for...of 循环。每一次返回数组的下一个元素给你,代码如下:

let output = []; for (let item of input) { let newItem = oodlify(item); output.push(newItem); }

这样就清晰很多了,注意这里计数器和比较都不用了,你甚至都不用把元素从数组里面取出来。for...of 帮我们做了里面的脏活累活。如果现在用 for...of 来代替所有的 for 循环,其实就可以很大程度上降低复杂性。但是,我们还可以做进一步的优化。

mapping

for...of 循环比 for 循环更清晰,但是依然需要一些配置性的代码。如不得不初始化一个 output 数组并且每次循环都要调用 push() 函数。但有办法可以让代码更加简洁有力,我们先扩展一下问题。

如果有两个数组需要调用 oodlify 函数会怎么样?

const fellowship = [ 'frodo', 'sam', 'gandalf', 'aragorn', 'boromir', 'legolas', 'gimli', ]; const band = [ 'John', 'Paul', 'George', 'Ringo', ];

很容易想到的方法是对每个数组都做循环:

let bandoodle = []; for (let item of band) { let newItem = oodlify(item); bandoodle.push(newItem); } let floodleship = []; for (let item of fellowship) { let newItem = oodlify(item); floodleship.push(newItem); }

这确实ok,有能正确执行的代码,就比没有好。但是重复的代码太多了——不够“DRY”。我们来重构它以降低重复性,创建一个函数:

function oodlifyArray(input) { let output = []; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } let bandoodle = oodlifyArray(band); let floodleship = oodlifyArray(fellowship);

这看起来好多了,可是如果我们想使用另外一个函数该怎么办?

function izzlify(s) { return s.replace(/[aeiou]+/g, 'izzle'); }

上面的 oodlifyArray() 一点用都没有了。但如果再创建一个 izzlifyArray() 函数的话,代码又重复了。不管那么多,先写出来看看什么效果:

function oodlifyArray(input) { let output = []; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } function izzlifyArray(input) { let output = []; for (let item of input) { let newItem = izzlify(item); output.push(newItem); } return output; }

这两个函数惊人的相似。那么是不是可以把它们抽象成一个通用的模式呢?我们想要的是:给定一个函数和一个数组,通过这个函数,把数组中的每一个元素做操作后放到新的数组中。我们把这个模式叫做 map 。一个数组的 map 函数如下:

function map(f, a) { let output = []; for (let item of a) { output.push(f(item)); } return output; }

这里还是用了循环结构,如果想要完全摆脱循环的话,可以做一个递归的版本出来:

function map(f, a) { if (a.length === 0) { return []; } return [f(a[0])].concat(map(f, a.slice(1))); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyzfw.html