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

前言

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

循环

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

总结

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

赞 (0)

相关推荐

  • JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

    JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

    本文实例讲述了JS实现的图片选择顺序切换和循环切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 详解JS浏览器事件循环机制

    详解JS浏览器事件循环机制

    先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的. 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种. 浏览器内核有多种线程在工作. GUI 渲染线程: 负责渲染页面,解析 HTML,C

  • 通过循环优化 JavaScript 程序

    前言 对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句.本文将会帮你解决这个问题. 我们将看到 JavaScript 中主要的循环类型,以及如何针对它们进行高效编码. 现在开始! 循环性能 谈到循环性能,争论的焦点始终会集中到关于应该使用哪种循环,哪个是速度最快.性能最好的?事实上,在 JavaScript 提供的四种循环类型中,只有一种比其他循环慢得多 --  for-in 循环. 对循环类型的选择应基于你的需求而不是性能问

  • 前端js中的事件循环eventloop机制详解

    前言 我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的: console.log(1); setTimeout(function() { console.log(2); }, 0); new Promise(function(resolve) { console.log(3); resolve(Date.now()); }).then(function() { console.log(4); }); console.log(5); setTim

  • 利用Node.js如何实现文件循环覆写

    前言 这次编写Node.js项目的时候用到了日志模块,其中碰到了一个小问题. 这是一个定时执行可配置自动化任务的项目,所以输出信息会不断增加,也就意味着日志文件会随时间不断增大.如果对日志文件大小不加以控制,那么服务器的磁盘迟早会被撑满.所以限制文件大小是有必要的. 最理想的控制方式就是当文件大小超过限制时,清除最先记录的数据.类似一个FIFO的队列. # 删除前面的数据 - 1 xxx ...... 100 abc # 文件末尾追加数据 + 101 xxxx log4js的file rolli

  • 浅谈JS闭包中的循环绑定处理程序

    前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件.就是这个问题让我整整调了一个下午.最后还是下班回家,上网查资料才知道怎么解决的. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的.谢谢! 先贴上错误的例子让大家看看.(例子里面用到jQuery,请导入jQuery库) 复制代码 代码如下: <!DOCTYPE html PUBLIC &q

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

    前言 在本文中,我们将介绍两种提取循环内数据的方法:内部迭代和外部迭代.分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 循环 举个例子,假设有一个函数 logFiles(): const fs = require('fs'); const path = require('path'); function logFiles(dir) { for (const fileName of fs.readdirSync(dir)) { // (A) const filePath = pat

  • JavaScript中匿名函数的用法及优缺点详解

    匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    目录 何为递归 构成递归条件 关于回溯 实际业务 组合问题 何为递归 递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环 构成递归条件 子问题须与原始问题为同样的事,且更为简单

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解)

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace方法的返回值为:一个新的字符串. 3.说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换. 示例代码: <!DOCTYPE html> <html lang

  • JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

  • JavaScript中BOM,DOM和事件的用法详解

    JavaScript中BOM,DOM和事件的用法详解

    目录 BOM 概念 对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分 核心DOM模型 HTML DOM 事件监听机制 概念 常见的事件 事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo

  • JavaScript中new操作符的原理与实现详解

    目录 一.new做了哪些事 二.返回不同类型时有哪些表现 三.手写new的实现原理 一.new做了哪些事 先看看new的使用场景: // 1.创建一个构造函数 function Vehicle(name, price) { this.name = name this.price = price } ​ // 2.new一个实例对象 let truck = new Vehicle() console.log(truck); //Vehicle { name: undefined, price: u

  • JavaScript数据结构之优先队列与循环队列实例详解

    JavaScript数据结构之优先队列与循环队列实例详解

    本文实例讲述了JavaScript数据结构之优先队列与循环队列.分享给大家供大家参考,具体如下: 优先队列 实现一个优先队列:设置优先级,然后在正确的位置添加元素. 我们这里实现的是最小优先队列,优先级的值小(优先级高)的元素被放置在队列前面. //创建一个类来表示优先队列 function Priorityqueue(){ var items=[];//保存队列里的元素 function QueueEle(e,p){//元素节点,有两个属性 this.element=e;//值 this.pr

  • Javascript中关于Array.filter()的妙用详解

    前言 和map类似,Array的filter也接收一个函数.但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素. 实例介绍 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15]

随机推荐