貌似很多人都爱用这个作为写文章的初尝试,那来吧。
遍历文件夹下的所有文件,如遍历文件夹下并操作HTML/CSS/JS/PNG/JPG步骤如下:
1、传入一个路径,读取路径里面所有的文件;
2、遍历读取的文件,判断当前文件是文件还是文件夹;
3、if: 前目录为文件,输出当前文件绝对路径,return;
4、else: 当前目录为文件夹,获取文件夹路径,继续递归遍历该文件夹下的文件;
5、直至遍历完目录中的所有文件为止。

常规实现之Code:


import * as fs from 'fs';
import * as path from 'path'; // 导入fs库和path库,哪里来的?npm, yarn了解一下 /**
* @description
* path.resolve(...pathSegments: string[]): string
* @param 参数是一串字符串,返回一个绝对路径
* 比如 path.resolve(`${__dirname}`, '../../assets')
* __dirname是nodejs下的一个全局变量,可以获得当前文件所在目录的完整目录名
* 相当于从当前文件的目录 cd ../../assets/,获取这个assets目录的绝对路径
*/
const dirPath = path.resolve(`${__dirname}`, '../../assets/'); fileDisplay(dirPath); /**
* 文件遍历方法
* @param filePath 需要遍历的文件路径
*/
function fileDisplay(filePath: string) {
// 根据文件路径读取文件,返回一个文件列表
fs.readdir(filePath, (err, files) => {
if (err) {
console.warn(err);
return;
}
// 遍历读取到的文件列表
files.forEach(filename => {
// path.join得到当前文件的绝对路径
const filepath = path.join(filePath, filename);
// 根据文件路径获取文件信息
fs.stat(filepath, (error, stats) => {
if (error) {
console.warn('获取文件stats失败');
return;
}
const isFile = stats.isFile(); // 是否为文件
const isDir = stats.isDirectory(); // 是否为文件夹
if (isFile) {
console.log(filepath); //如果是文件,输出它的路径咯~
}
if (isDir) {
fileDisplay(filepath); // 递归,如果是文件夹,就继续遍历该文件夹里面的文件;
}
});
});
});
}

ES6-Promise实现

假如您了解ES6之Promise,就可以拒绝这种回调地狱了,因为回调嵌套大量缩进会有不少缺点:难以复用、借助外层变量...
那我们就可以进阶了哦,究极进化:


// 读取文件的逻辑拉出
function fsReadDir(dir: string) {
return new Promise<string[]>((resolve, reject) => {
fs.readdir(dir, (err, files) => {
if (err) reject(err);
resolve(files);
});
});
}
// 获取fs.stats的逻辑拉出
function fsStat(path: string) {
return new Promise<fs.Stats>((resolve, reject) => {
fs.stat(path, (err, stat) => {
if (err) reject(err);
resolve(stat);
});
});
}
// 搜索文件主方法
async function fileSearch(dirPath: string) {
const files = await fsReadDir(dirPath);
const promises = files.map(file => {
return fsStat(path.join(dirPath, file));
});
const datas = await Promise.all(promises).then(stats => {
for (let i = 0; i < files.length; i += 1) files[i] = path.join(dirPath, files[i]);
return { stats, files };
});
datas.stats.forEach(stat => {
const isFile = stat.isFile();
const isDir = stat.isDirectory();
if (isDir) {
fileSearch(datas.files[datas.stats.indexOf(stat)]);
}
if (isFile) console.log(datas.files[datas.stats.indexOf(stat)]);
});
}

以上为Promise简单实现,便于新人阅读理解Promise的优点,更多Promise的深层实现请参考阮一峰老师的大全ECMAScript 6 入门,那么这篇文章就先结束了,但这不是全部。程序之路,漫漫,共勉。

来源:https://segmentfault.com/a/1190000016841072

TypeScript ES6-Promise 递归遍历文件夹中的文件的更多相关文章

  1. python 遍历文件夹中所有文件

    '''使用walk方法递归遍历目录文件,walk方法会返回一个三元组,分别是root.dirs和files. 其中root是当前正在遍历的目录路径:dirs是一个列表,包含当前正在遍历的目录下所有的子 ...

  2. java基础 File 递归删除文件夹中所有文件文件夹 目录(包含子目录)下的.java文件复制到e:/abc文件夹中, 并统计java文件的个数

    File 递归删除文件夹中所有文件文件夹 package com.swift.kuozhan; import java.io.File; import java.util.Scanner; /*键盘录 ...

  3. python遍历文件夹中所有文件夹和文件,os.walk

    python中可以用os.walk来遍历某个文件夹中所有文件夹和文件. 例1: import os filePath = 'C:/Users/admin/Desktop/img' for dirpat ...

  4. C++获取文件夹中所有文件

    获取文件夹中的文件,用到过很多次,每次用的时候都要去查下,很烦,所以想自己写下,当然,借鉴了很多其他大佬的博客 主要实现的函数,如下: void getFiles( string path, vect ...

  5. Python列出文件夹中的文件

    几乎所有的关于操作系统的内容可以在python 官方文档中找到:https://docs.python.org/3/library/os.html#module-os 其中os.path被单独列出:h ...

  6. cocos项目导入其它源文件时加入依赖库时,头文件提示找不到文件夹中的文件

    cocos项目导入其它源文件时加入依赖库时,头文件提示找不到文件夹中的文件解决方法: 选择项目属性->c/c++->常规,在附加包括项目中加上对应的文件夹 cocos test项目的库(所 ...

  7. 【转载】C#代码开发过程中如何快速比较两个文件夹中的文件的异同

    在日常的使用电脑的过程中,有时候我们需要比较两个文件夹,查找出两个文件夹中不同的文件以及文件中不同的内容信息,进行内容的校对以及合并等操作.其实使用Beyond Compare软件即可轻松比较,Bey ...

  8. 基于Python——实现两个文件夹中的文件拷贝

    [背景]当复制一个文件夹中的某文件到另一个文件夹中时是一件很容易的事情,可是如果存在很多文件夹中的文件需要一一拷贝,就会变的很繁琐,稍有不慎就会遗漏,今天就用Python来解决这个问题—— [代码实现 ...

  9. python将test01文件夹中的文件剪切到test02文件夹中

    将test01文件夹中的文件剪切到test02文件夹中 import shutil import os def remove_file(old_path, new_path): print(old_p ...

随机推荐

  1. 【知识】定时器setTimeout/setInterval执行时this指针指向问题

    [问题描述] setTimetout/setInterval中this指针指向window,以下是一个小demo: var demoChange = { key: true, changeFun() ...

  2. MySQL的视图和索引

    MySQL的视图 简单来说MySQL的视图就是对SELECT 命令的定义的一个快捷键,我们查询时会用到非常复杂的SELECT语句,而这个语句我们以后还会经常用到,我们可以经这个语句生产视图.视图是一个 ...

  3. 解决html5大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  4. 目标检测Object Detection概述(Tensorflow&Pytorch实现)

    1999:SIFT 2001:Cascades 2003:Bag of Words 2005:HOG 2006:SPM/SURF/Region Covariance 2007:PASCAL VOC 2 ...

  5. Spring Boot教程(十三)整合elk(2)

    配置.启动kibana 到kibana的安装目录: ./bin/kibana 默认配置即可. 访问localhost:5601,网页显示: 证明启动成功. 创建springboot工程 起步依赖如下: ...

  6. 初识linux命令

    1. type: 查看是外部命令/内部命令 外部命令 有存放地址信息 内部命令 is a shell builtin 2.file 查看文件的编码方式 file /sbin/ifconfig 编译执行 ...

  7. Nodejs搭建音视频通信-信令服务器 总结

    1.安装nodejs  node-v10.16.3-x64.msi 2.安装配置环境变量 这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在 ...

  8. React Native商城项目实战01 - 初始化设置

    1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...

  9. 【原创实现】C 多线程入门Demo CAS Block 2种模式实现

    分Cas和Block模式实现了demo, 供入门学习使用,代码全部是远程实现. 直接上代码: /* ================================================== ...

  10. WAMP搭建与配置

    使用WampServer整合软件包进行WAMP环境搭建 WampServer是一款由法国人开发的Apache Web服务器.PHP解释器以及MySQL数据库的整合软件包.免去了开发人员将时间花费在繁琐 ...