脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript提取循环内数据

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

 更新时间：2019年03月04日 09:56:32   作者：疯狂的技术宅  
这篇文章主要给大家介绍了关于如何在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

总结

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

您可能感兴趣的文章:

相关文章

  • js实现遮罩层划出效果是生成div而不是显示

    js实现遮罩层划出效果是生成div而不是显示

    单纯的遮盖层划出是比较简单的，而本例介绍的这个就有点难度，生成div，而不是显示存在的div，需要的朋友可以参考下
    2014-07-07
  • 理运用命名空间让js不产生冲突避免全局变量的泛滥

    理运用命名空间让js不产生冲突避免全局变量的泛滥

    为了避免变量之间的覆盖与冲突，可以生成命名空间，命名空间是一种特殊的前缀，在不同的匿名函数中，根据功能声明一个不同的命名空间
    2014-06-06
  • JavaScript正则表达式函数总结（常用）

    JavaScript正则表达式函数总结（常用）

    正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用.这篇文章主要介绍了JavaScript正则表达式函数总结,需要的朋友可以参考下
    2018-02-02
  • 一文教你如何优雅的使用WebSocket

    一文教你如何优雅的使用WebSocket

    WebSocket最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种,下面这篇文章主要给大家介绍了关于如何优雅的使用WebSocket的相关资料,需要的朋友可以参考下
    2022-05-05
  • javascript 主动派发事件总结

    javascript 主动派发事件总结

    有时需要模仿用户的一些动作（鼠标/键盘操作），最常见的莫过于鼠标点击。一一列举
    2011-08-08
  • 为什么TypeScript的Enum会出现问题

    为什么TypeScript的Enum会出现问题

    TypeScript引入了很多静态编译语言的特性，今天有一个类型需要着重讨论下，这就是enum，需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 详解微信小程序网络请求接口封装实例

    详解微信小程序网络请求接口封装实例

    这篇文章主要介绍了微信小程序网络请求接口封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Uni-app返回上一页面并携带参数的实现方法

    Uni-app返回上一页面并携带参数的实现方法

    这篇文章主要介绍了Uni-app返回上一页面并携带参数的实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 微信小程序利用云函数获取手机号码

    微信小程序利用云函数获取手机号码

    这篇文章主要介绍了微信小程序利用云函数获取手机号码功能，本文通过实例代码给大家讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • js下利用userData实现客户端保存表单数据

    js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用Cookie技术来实现，这些功能例如：下拉列表框选择的选项，文本框输入的数据等。
    2010-06-06

最新评论