NodeJS如何將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON

這篇文章主要為大家展示了“NodeJS如何將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“NodeJS如何將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON”這篇文章吧。

在編程之前，一定要有一個(gè)信條：代碼是為了減少工作量而生的，重復(fù)枯燥的工作是不能容忍的。

需求

這是由上篇文章衍生出的需求，我已經(jīng)將一個(gè)文件夾內(nèi)所有的文件名轉(zhuǎn)譯為英文，但我在頁(yè)面上還需要將這些圖片引入加載。如果一個(gè)一個(gè)手寫到程序里，未免有點(diǎn)勞心勞神。那么何不將這個(gè)文件夾按照存放路徑變成一個(gè)相應(yīng)的JSON在前端請(qǐng)求并渲染呢？

說(shuō)干就干。

文件夾的路徑如下所示：

一級(jí)路徑：test
二級(jí)路徑：A,B,C...共十三個(gè)文件夾
三級(jí)路徑：每個(gè)二級(jí)路徑下有3-8個(gè)文件夾不等
四級(jí)路徑：a.jpg,b.jpg,c.jpg等數(shù)量不等的圖片文件

思路

1.一個(gè)全局變量：數(shù)組類型obj。

2.遞歸遍歷目錄，是文件夾的取出名字，建立一個(gè)對(duì)象，放入文件夾名name和一個(gè)空數(shù)組list，如

{
  name:'fileName',
  list:[]//用來(lái)存放下屬路徑
}

3.依次重復(fù)步驟2，直至尋找到路徑下的文件，將文件名name和拼合好的路徑src放入歸屬的list中，如下：

list:[
  {
    name:'fileName',
    src:'filePath'
  }
]

實(shí)踐

語(yǔ)言

NodeJS

需求模塊
fs/async。

代碼 先上代碼，邏輯解析在提示補(bǔ)上。

(function() {
 Array.prototype.distinct = function() {
 var arr = this,
  result = [],
  i,
  j,
  len = arr.length;
 for (i = 0; i < len; i++) {
  for (j = i + 1; j < len; j++) {
  if (arr[i].name === arr[j].name) {
   j = ++i;
  }
  }
  result.push(arr[i]);
 }
 return result;
 }
 // 主業(yè)務(wù)代碼
 var fs = require("fs");
 var async = require('async');
 var obj = [];
 var search = function(src) {
 // 讀取目錄中的所有文件/目錄
 fs.readdir(src, function(err, paths) {
  if (err) {
  throw err;
  }
  paths.forEach(function(path) {
  var _src = src + '/' + path;
  fs.stat(_src, function(err, st) {
   if (err) {
   throw err;
   }
   // 判斷是否為文件
   if (st.isFile()) {
   async.forEachLimit(obj, 1000, function(item, callback) {
    if (src.match(new RegExp(item.name))) {

    item.list.forEach(function(iv) {
     if (src.match(new RegExp(iv.name))) {
     iv.list.push({
      name: path.split('.')[0],
      src: _src
     })

     }

    })
    }
    callback(null, item)
   })
   obj = obj.distinct();
   fs.writeFile("main.json", JSON.stringify(obj), "utf-8", (error) => {
    //監(jiān)聽(tīng)錯(cuò)誤，如正常輸出，則打印null
    if (error == null) {
    obj = null;

    }

   });
   }
   // 如果是目錄則遞歸調(diào)用自身
   else if (st.isDirectory()) {
   if (obj.length <= 0) {
    obj.push({
    name: path,
    list: []
    })
   } else {
    var value = paths;
    async.forEachLimit(obj, 1000, function(item, callback) {
    //如果數(shù)組里已有
    if (src.match(new RegExp(item.name))) {
     item.list.push({
     name: path,
     list: []
     })
    } else {
     value.forEach(function(vv) {
     if (vv == item.name) {
      obj.push({
      name: path,
      list: []
      })
     } else {}
     })
    }
    callback(null, item)
    }, function(err) {
    if (err) throw err;
    })
   }
   exists(_src, search);

   }
  });
  });
 });
 };
 var exists = function(src, callback) {
 callback(src);
 };
 exists('./test2', search);
})();

提示

首先，要有心理準(zhǔn)備，這個(gè)輪子里使用了遞歸+很多遍歷，這對(duì)于內(nèi)存占用是很嚴(yán)重的，尤其是我們還有一個(gè) 全局變量OBJ ，如果邏輯處理不好很容易會(huì)出現(xiàn)錯(cuò)誤內(nèi)存溢出。這也是為什么我引入了async模塊的理由。

在引入模塊之后，第一步要著眼于判斷為文件夾后的函數(shù)：

//如果obj為空，說(shuō)明我們是第一次進(jìn)入函數(shù)，那么插入一個(gè)新的元素
if (obj.length <= 0) {
 obj.push({
 name: path,
 list: []
 })
}

async.forEachLimit是異步串行函數(shù)，可以同批次運(yùn)行指定數(shù)量的代碼，可以避免一次遍歷太多，里面的參數(shù)依次為（數(shù)組，指定的數(shù)量，執(zhí)行函數(shù)，錯(cuò)誤回調(diào)）。

下面代碼中的參數(shù)很多，如paths，path，src，_src等，打代碼的時(shí)候經(jīng)常會(huì)讓我頭腦不清晰，這也側(cè)面告誡了我一個(gè)問(wèn)題，同一作用域內(nèi)不宜有太多處理函數(shù)。

//如果路徑參數(shù)src里匹配到了obj中元素的name，說(shuō)明數(shù)組里已經(jīng)有了上級(jí)文件夾，則向此上級(jí)文件夾內(nèi)插入此時(shí)的文件夾名path
if (src.match(new RegExp(item.name))) {
 item.list.push({
 name: path,
 list: []
 })
} 

/*如果沒(méi)有上級(jí)文件夾，那往尾部插入新的元素
 *進(jìn)行一次遍歷排查，去除掉二級(jí)路徑向尾部插入的舉動(dòng)*/

value.forEach(function(vv) {
 if (vv == item.name) {
 obj.push({
  name: path,
  list: []
 })
 } else {}
})

對(duì)我來(lái)說(shuō)，這段代碼是一段丑陋的函數(shù)，處理方法過(guò)于粗糙，并且占用了不必要的內(nèi)存空間，更嚴(yán)重的是，拖累了整體文件的運(yùn)行速度，但時(shí)間倉(cāng)促，加之能力菜的真實(shí)，暫時(shí)還尚未想出解決方案。

還要備注的是，這里本來(lái)想達(dá)到的去重判斷因?yàn)樯霞?jí)方法套用的遍歷次序不同，造成我只完成了初級(jí)的防止push重復(fù)，卻又有了遞歸式的重復(fù)。有興趣的朋友在使用這個(gè)demo時(shí)可以將首行的去重方法刪除，看看效果。

處理好了文件夾狀態(tài)下的方法，來(lái)看看已經(jīng)到了四級(jí)路徑的處理

//src是此時(shí)運(yùn)行的search方法內(nèi)的文件路徑參數(shù)，對(duì)item.name也就是二級(jí)路徑的文件名進(jìn)行匹配，如果正確，則對(duì)三級(jí)路徑下的文件名進(jìn)行匹配（本來(lái)我想在這里寫遞歸或者回調(diào)的，太懶取消原計(jì)劃）。全部都匹配正確，則往內(nèi)插入文件名和文件路徑
async.forEachLimit(obj, 1000, function(item, callback) {
 if (src.match(new RegExp(item.name))) {
 item.list.forEach(function(iv) {
  if (src.match(new RegExp(iv.name))) {
  iv.list.push({
   name: path.split('.')[0],
   src: _src
  })
  }
 })
 }
 callback(null, item)
})

函數(shù)到這里時(shí)，就是最后一步，寫入json文件了，不能忘記的是，這里需要進(jìn)行一次去重，原因在上文提到了，方法在函數(shù)行首。

PS：在運(yùn)行結(jié)束之后，一定要將全局變量清空，雖然我暫時(shí)尚未遇到因此理由內(nèi)存的崩潰，但可以預(yù)見(jiàn)到的是，在用于龐大文件夾時(shí)，勢(shì)必會(huì)對(duì)內(nèi)存有很大的傷害。

obj = obj.distinct();
fs.writeFile("main.json", JSON.stringify(obj), "utf-8", (error) => {
 //監(jiān)聽(tīng)錯(cuò)誤，如正常輸出，則打印null
 if (error == null) {
 obj = null;
 }
});

以上是“NodeJS如何將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！