在 JavaScript 中优雅的提取循环内的数据

翻译：疯狂的技术宅 原文：http://2ality.com/2018/04/ext…在本文中，我们将介绍两种提取循环内数据的方法：内部迭代和外部迭代。循环举个例子，假设有一个函数 logFiles()：const fs = require(‘fs’);const path = require(‘path’);function logFiles(dir) { for (const fileName of fs.readdirSync(dir)) { // (A) const filePath = path.resolve(dir, fileName); console.log(filePath); const stats = fs.statSync(filePath); if (stats.isDirectory()) { logFiles(filePath); // (B) } }}logFiles(process.argv[2]);从 A 行开始的循环用来记录文件路径。它是 for-of 循环和递归的组合（递归调用在 B 行）。如果你发现循环内的某些数据（迭代文件）有用，但又不想记录它，那应该怎么办？内部迭代提取循环内数据的第一个方法是内部迭代：const fs = require(‘fs’);const path = require(‘path’);function logFiles(dir, callback) { for (const fileName of fs.readdirSync(dir)) { const filePath = path.resolve(dir, fileName); callback(filePath); // (A) const stats = fs.statSync(filePath); if (stats.isDirectory()) { logFiles(filePath, callback); } }}logFiles(process.argv[2], p => console.log(p));这种迭代方式与Array的 .forEach()类似：logFiles() 内实现循环并对每个迭代值（行A）调用 callback。外部迭代内部迭代的替代方案是外部迭代：我们实现了一个iterable，可以用生成器帮助我们实现：const fs = require(‘fs’);const path = require(‘path’);function* logFiles(dir) { for (const fileName of fs.readdirSync(dir)) { const filePath = path.resolve(dir, fileName); yield filePath; const stats = fs.statSync(filePath); if (stats.isDirectory()) { yield* logFiles(filePath); // (A) } }}for (const p of logFiles(process.argv[2])) { console.log(p);}如果是内部迭代，logFiles() 会调用我们（“推”给我们）。而这一次，换我们来调用它了（“拉”过来）。请注意，在生成器中，必须通过 yield* 进行递归调用（第A行）：如果只调用 logFiles() 那么它会返回一个iterable。但我们想要的是在该 iterable 中 yield 每个项目。这就是 yield* 的作用。生成器有一个非常好的特性，就是处理过程能够与内部迭代一样互锁：每当 logFiles() 创建另一个 filePath 时，我们能够立即查看它，然后 logFiles() 继续。这是一种简单的协作式多任务处理，其中 yield 暂停当前任务并切换到另一个任务。扩展阅读Chapter “Iterables and iterators” in “Exploring ES6”.Chapter “Generators” in “Exploring ES6”.欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目世界顶级公司的前端面试都问些什么CSS Flexbox 可视化手册过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！从设计者的角度看 ReactCSS粘性定位是怎样工作的一步步教你用HTML5 SVG实现动画效果程序员30岁前月薪达不到30K，该何去何从第三方CSS安全吗？谈谈super(props) 的重要性本文首发微信公众号：jingchengyideng欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章