TypeScript ES6-Promise 递归遍历文件夹中的文件

貌似很多人都爱用这个作为写文章的初尝试,那来吧。
遍历文件夹下的所有文件,如遍历文件夹下并操作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

posted @ 2018-12-23 14:50  大天狗子  阅读(2627)  评论(0编辑  收藏  举报