如何在JavaScript中优雅的提取循环内数据详解


Posted in Javascript onMarch 04, 2019

前言

在本文中,我们将介绍两种提取循环内数据的方法:内部迭代和外部迭代。分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

循环

举个例子,假设有一个函数 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”.

原文:http://2ality.com/2018/04/extracting-loops.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 #Javascript
Vuex mutitons和actions初使用详解
Mar 04 #Javascript
JS重学系列之聊聊new操作符
Mar 04 #Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
ES10 特性的完整指南小结
Mar 04 #Javascript
node.js使用express框架进行文件上传详解
Mar 03 #Javascript
微信小程序新手教程之启动页的重要性
Mar 03 #Javascript
You might like
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python执行精确的小数计算方法
2019/01/21 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
个人求职信范文分享
2013/12/13 职场文书
关于母亲节的感言
2014/02/04 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
大学生就业策划书范文
2014/04/04 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Python基础之进程详解
2021/05/21 Python
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记