Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解


Posted in Javascript onApril 20, 2019

前言

用来干什么:想干嘛干嘛
为什么写:写来玩,学习node.js文件系统相关api;树结构这种东西还是挺不错的,会用会造才是真的会
用了什么: fs.readdir(dir), fs.stat(dir).isFile(), path处理路径等

思路:

  1. 读取当前文件夹(不是文件夹的另作处理),获得其下所有文件和目录组成的数组;
  2. 循环该数组,判断是文件夹还是文件,文件的话直接push到childFiles(对象有两个属性:short文件名,full完整文件路径)
  3. 文件夹的话,先把当前文件夹作为key,存到父级文件夹的childDir属性下,然后自调用传当前文件夹路径
  4. 每一层文件夹都包含三个属性:dir文件夹路径,childFiles子文件,childDir子文件夹,存储为对象结构
  5. 以上步骤重复,直到达到最底层空文件夹或该文件夹只有文件

输出的样子components-dir-tree.json

{
  "dir": "D:\\node-test\\components",
  "childFiles": [
    {
      "short": "components-dir-tree.json",
      "full": "D:\\node-test\\components\\components-dir-tree.json"
    },
    {
      "short": "file.js",
      "full": "D:\\node-test\\components\\file.js"
    },
    {
      "short": "index.js",
      "full": "D:\\node-test\\components\\index.js"
    }
  ],
  "childDir": {
    "no": null,
    "test": {
      "dir": "D:\\node-test\\components\\test",
      "childFiles": [],
      "childDir": {
        "aa": {
          "dir": "D:\\node-test\\components\\test\\aa",
          "childFiles": [
            {
              "short": "bb.js",
              "full": "D:\\node-test\\components\\test\\aa\\bb.js"
            }
          ],
          "childDir": {
            "cc": null
          }
        }
      }
    }
  }
}

。

目录结构(仅components)

...
|-- components
    -- index.js
    -- file.js
    -- components-dir-tree.json  // 生成的文件树对象的输出文件,方便查看
    -- no
    -- test
       -- aa
        -- cc

使用

将输出结果格式化写入到json文件,看起来一目了然

components/index.js:
/**
 * init
 */
require('console-color-mr'); // 命令行样式
const fs = require('fs');
const path = require('path');
const { getDirTree, getDirName } = require('./file.js');

const componentDir = path.resolve(__dirname, './');
// console.log('componentDir: ', componentDir);

const ComponentInit = (function init() {
 console.log('______ init ______'.blueBG, '\n');
 let treeObj = getDirTree(componentDir);
 // console.log('treeObj: ',treeObj);
 if (treeObj) {
  let outdir = `${__dirname}\\${getDirName(componentDir)}-dir-tree.json`;
  // 写入文件
  fs.writeFile(outdir, JSON.stringify(treeObj, '', '\t'), 'utf8', (err) => {
   if (err) throw err;
   console.log(`目录树已输出为文件保存: ${outdir}`.greenBG);
  });
 }
 return init;
})();

module.exports = ComponentInit;

主函数 getDirTree:

/components/file.js
const fs = require('fs');

/**
 * 获取目录下的文件树
 * @param {读取的路径} dir
 * @returns 返回 dir 目录下的文件树
 */
function getDirTree(dir) {
 let obj = {
  dir: dir, // 文件夹路径
  childFiles: [], // 子文件
  childDir: {} // 子目录
 };
 let objStr = JSON.stringify(obj);
 if (isFile(dir)) return console.log(`${dir}: 不是文件夹`.redBG);
 
 // 读取目录
 let files = readDir(dir);
 if (!files.length) console.log(`${dir}: 文件夹为空`.redBG);
 
 // 遍历文件
 files.forEach(file => {
  let tempdir = `${dir}\\${file}`;
  if (isFile(tempdir)) {
   obj.childFiles.push({
    short: file, // 文件名
    full: tempdir // 完整路径
   });
   
  } else {
   // console.log('tempdir: ',tempdir);
   let dirname = getDirName(tempdir);
   // 在当前文件夹的对象下 childDir 属性(1),以文件夹名作为key(2),
   // (2)的值是该目录下 路径dir、childFiles子文件、childDir子文件夹组成的对象或null
   obj.childDir[dirname] = getDirTree(tempdir);
  }
 });
 return JSON.stringify(obj) === objStr ? null : obj;
}

工具函数 readDir/isFile

// 读取路径下的文件、文件夹
function readDir(dir) {
 return fs.readdirSync(dir, (err, files) => {
  if (err) throw err;
  // console.log(`${dir}, files: `.green, files);
  // if (!files.length) console.log(`${dir}: 文件夹为空`.redBG);
  return files;
 })
}

// 判断制定路径是否是文件
function isFile(dir) {
 return fs.statSync(dir).isFile();
}

// 获取目录名
function getDirName(dir) {
 let tempdir = dir.substr(dir.lastIndexOf('\\')+1, dir.length);
 return tempdir;
}

// const components_out = readFile(path.resolve(__dirname, './components-dir-tree.json'));
// console.log('components-dir-tree: ', components_out);

// 读取指定目录的文件
function readFile(dir) {
 let result = fs.readFileSync(dir, 'utf-8');
 return (
  result 
  ? {
   dir: dir,
   result: result
  } 
  : null
 );
}

module.exports = {
 getDirTree,
 readDir,
 isFile,
 readFile
}

完结,撒花,撒花!

以上所述是小编给大家介绍的Node.js读指定文件夹输出该文件夹文件树详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
xml转json的js代码
Aug 28 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
Augularjs-起步详解
Jul 08 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
You might like
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python查看数据类型的方法
2019/10/12 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
建筑投标担保书
2014/05/20 职场文书
罚款通知怎么写
2015/04/22 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js