在 JavaScript 中優雅的提取循環內的數據

Alliot 發布于2019-08-23 15:35 / 1860人閱讀

摘要：翻譯瘋狂的技術宅原文在本文中，我們將介紹兩種提取循環內數據的方法內部迭代和外部迭代。它是循環和遞歸的組合遞歸調用在行。

翻譯：瘋狂的技術宅 
原文：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 寫一個腦力小游戲吧！

從設計者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現動畫效果

程序員30歲前月薪達不到30K，該何去何從

第三方CSS安全嗎？

談談super(props) 的重要性

本文首發微信公眾號：jingchengyideng 歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

云服務器 GPU云服務器 excel提取圖片中的文字內容數據在內存中的存儲 java中對象的循環數據在內存中的存儲形式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102282.html

ES6：解構——JavaScript 從數組和對象中提取數據的優雅方法

摘要：跳過數組中的元素學會了如何按順序從數組中提取數據。解構方法中提供了很好的解決方案。從對象中提取數據依然從最基本的開始，提取從中提取和。本文編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文連接：ES6: Destructuring — an elegant...

GraphQuery 2019-08-20 16:02 評論0 收藏0
JavaScript中的那些語句

摘要：前言基本上，我們每天都在和中的各種語句進行著溝通，那些我們經常見面的老朋友，或者是未曾見面的新朋友，它們共同維護著的流程，讓我們的程序穩步運行。前言基本上，我們每天都在和 JavaScript 中的各種語句進行著溝通，那些我們經常見面的老朋友，或者是未曾見面的新朋友，它們共同維護著 JavaScript 的流程，讓我們的程序穩步運行。那么，你是否對它們足夠了解呢如果文章...

CoderBear 2019-08-23 16:45 評論0 收藏0
JavaScript 編程精解中文第三版九、正則表達式

摘要：使用構造器時，需要將模式書寫成普通的字符串，因此反斜杠的使用規則與往常相同。構造器的后四個參數小時分鐘秒毫秒是可選的，如果用戶沒有指定這些參數，則參數的值默認為。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Regular Expressions 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯部分參考了《JavaScript...

Pluser 2019-08-23 18:18 評論0 收藏0
編寫高效且優雅的 Python 代碼（1）

摘要：查看原函數的參數注釋甚至函數名的時候，只能看到裝飾器的相關信息。也就是說，它是裝飾器的裝飾器，并且以原函數為參數，作用是保留原函數的各種信息，使得我們之后查看被裝飾了的原函數的信息時，可以保持跟原函數一模一樣。貌似只能創建一個專欄，所以這篇文章只好放到JavaScript從前端到全終端里了? 原文鏈接：Effective Python Python 作為一門入門極易并容易上癮的語...

roadtogeek 2019-07-31 10:52 評論0 收藏0
JavaScript之變量及作用域

摘要：所以的作用域是靜態作用域，也叫詞法作用域。總結是一門基于詞法作用域靜態作用域的語言，會沿著作用域鏈像氣泡一樣向外部尋找變量聲明。又是函數作用域的語言，在中，使用和關鍵字后，能讓變量處于塊作用域中，而且不存在聲明提升。本文共 1700 字，讀完只需 7 分鐘概述變量，編程語言中我們用來模擬現實概念的工具，比方說，變量可以表示對象，數組，數字，字符。既然是工具，那么就用工具的適用范圍...

Faremax 2019-08-23 12:19 評論0 收藏0