无循环JavaScript(map、reduce、filter和find)资源-CSDN文库

152 浏览量 2021-01-21 13:45:20 上传评论收藏 108KB PDF 举报

资源推荐

资源详情

资源评论

无循环无循环 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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38515897

粉丝: 2
资源: 961

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip