在 JavaScript 中優(yōu)雅的提取循環(huán)內(nèi)的數(shù)據(jù)

Alliot 發(fā)布于2019-08-23 15:35 / 1900人閱讀

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

翻譯：瘋狂的技術宅 
原文：http://2ality.com/2018/04/ext...

在本文中，我們將介紹兩種提取循環(huán)內(nèi)數(shù)據(jù)的方法：內(nèi)部迭代和外部迭代。

循環(huán)

舉個例子，假設有一個函數(shù) 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 行開始的循環(huán)用來記錄文件路徑。它是 for-of 循環(huán)和遞歸的組合（遞歸調用在 B 行）。

如果你發(fā)現(xiàn)循環(huán)內(nèi)的某些數(shù)據(jù)（迭代文件）有用，但又不想記錄它，那應該怎么辦？

內(nèi)部迭代

提取循環(huán)內(nèi)數(shù)據(jù)的第一個方法是內(nèi)部迭代：

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() 內(nèi)實現(xiàn)循環(huán)并對每個迭代值（行A）調用 callback。

外部迭代

內(nèi)部迭代的替代方案是外部迭代：我們實現(xiàn)了一個iterable，可以用生成器幫助我們實現(xiàn)：

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);
}

如果是內(nèi)部迭代，logFiles() 會調用我們（“推”給我們）。而這一次，換我們來調用它了（“拉”過來）。

請注意，在生成器中，必須通過 yield* 進行遞歸調用（第A行）：如果只調用 logFiles() 那么它會返回一個iterable。但我們想要的是在該 iterable 中 yield 每個項目。這就是 yield* 的作用。

生成器有一個非常好的特性，就是處理過程能夠與內(nèi)部迭代一樣互鎖：每當 logFiles() 創(chuàng)建另一個 filePath 時，我們能夠立即查看它，然后 logFiles() 繼續(xù)。這是一種簡單的協(xié)作式多任務處理，其中 yield 暫停當前任務并切換到另一個任務。

擴展閱讀

Chapter “Iterables and iterators” in “Exploring ES6”.

Chapter “Generators” in “Exploring ES6”.

歡迎繼續(xù)閱讀本專欄其它高贊文章：

12個令人驚嘆的CSS實驗項目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

從設計者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現(xiàn)動畫效果

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

第三方CSS安全嗎？

談談super(props) 的重要性

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

GPU云服務器云服務器 excel提取圖片中的文字內(nèi)容數(shù)據(jù)在內(nèi)存中的存儲 java中對象的循環(huán) 數(shù)據(jù)在內(nèi)存中的存儲形式

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

轉載請注明本文地址：http://systransis.cn/yun/102282.html

ES6：解構——JavaScript 從數(shù)組和對象中提取數(shù)據(jù)的優(yōu)雅方法

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

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

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

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

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

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

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

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

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

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