第二章：前端視角——NodeJS檔案操作fs(1)

1.檔案處理的作用

在前端工程中，我們使用了一些腳手架工具，當我們編寫例如Vue/Angular等程式碼時最終放到瀏覽器執行的是編譯過後的程式碼，也就是這些語法需要經過NodeJS的處理，而這個處理的過程最基本的兩樣功能便是檔案的讀取，寫入。當我們更瞭解讀取和寫入的過程時，我們也就更能理解我們的工程目錄的含義。

2.Buffer

2.1 在介紹讀取之前我們先介紹一下NodeJS的Buffer，這部分內容可迅速瀏覽

• 緩衝區Buffer是暫時存放輸入輸出資料的一段記憶體
• JS語言沒有二進位制資料型別，而在處理TCP和檔案流的時候，必須二進位制資料。
• NodeJS提供了一個Buffer物件來提供對二進位制資料的操作
• Buffer是一個表示固定記憶體分配的全域性物件，也就是說要放到快取區中的位元組數需要提前確定
• Buffer好比由一個8位位元組元素組成的陣列，可以有效的在JavaScript中表示二進位制資料

位元組(Byte)是計算機儲存時的一種計量單位，一個位元組等於8位二進位制數，一個位就代表一個0或1，每8個位（bit）組成一個位元組（Byte）， 位元組是通過網路傳輸資訊的單位，一個位元組最大值十進位制數是255(2**8-1) 。

1024位元組(b)=1千位元組(kb)
1024千位元組(kb)=1兆位元組(mb)
1024兆位元組(mb)=1千兆位元組(gb)

我想我們應該已經可以算出你的3G流量套餐可以傳送多少位元組了，或者說可以發出多少個二進位制數，0和1了。更粗獷一點，我們可以暫時把Buffer理解成一種資料型別宣告，就像

var a = new Array()

2.2 定義Buffer 通過長度定義Buffer

// 建立一個長度為 10、且用 0 填充的 Buffer。
const buf1 = Buffer.alloc(10);
<Buffer 00 00 00 00 00 00 00 00 00 00>
// 建立一個長度為 10、且用 0x1 填充的 Buffer。
const buf2 = Buffer.alloc(10, 1);
<Buffer 01 01 01 01 01 01 01 01 01 01>
// 建立一個長度為 10、且未初始化的
Buffer，系統會隨機分配記憶體，可能該記憶體已經被使用過，帶有值。
const buf3 = Buffer.allocUnsafe(10);
<Buffer 98 a2 00 03 01 00 00 00 05 00>

通過陣列定義Buffer

// 建立一個包含 [0x1, 0x2, 0x3] 的 Buffer。
const buf4 = Buffer.from([1, 2, 3]);
<Buffer 01 02 03>
正常情況下值在0-255之間;

通過字串定義Buffer

const buf5 = Buffer.from('Hello World!');
<Buffer 48 65 6c 6c 6f 20 57 6f 72 6c 64 21>

2.3 Buffer常用方法

1. buffer.fill(value[, offset[, end]][, encoding])
   手動初始化，清空記憶體，將buffer內容清0

buffer.fill(0);
<Buffer 00 00 00 00 00 00 00 00 00 00>

2. buffer.write(string[, offset[, length]][, encoding])
   write方法,給buffer賦值string型別,

buffer.write('佩',0,3,'utf8');
// utf8 一個漢字佔三個位元組
<Buffer e4 bd a9 00 00 00 00 00 00 00>
buffer.write('子',3,3,'utf8');
<Buffer e4 bd a9 e5 ad 90 00 00 00 00>
//佩子

3. buffer.writeInt8(string[, offset[, length]][, encoding])
   writeInt8方法給buffer一個位元組賦值

var buf = new Buffer(4);
buf.writeInt8(0,0); //16 * 0
buf.writeInt8(16,1); //16 * 1
buf.writeInt8(32,2); //16 * 2
buf.writeInt8(48,3); //16 * 3
console.log(buf);
<Buffer 00 10 20 30>
//用16進位制展示值

4. buffer.toString([encoding[, start[, end]]])
   將buffer讀取為String

const buffer = Buffer.from('hello World!');
console.log(buffer);
<Buffer 68 65 6c 6c 6f 20 57 6f 72 6c 64 21>
console.log(buffer.toString('utf8',6,11));
World

5. buffer.slice([start[, end]])
   buffer擷取

const buffer = Buffer.from('hello World!'); const newBuf = buffer.slice(0,5); console.log(newBuf); <Buffer 68 65 6c 6c 6f>

6. buffer.copy(target[, targetStart[, sourceStart[, sourceEnd]]])
   複製Buffer,可以把多個buffer拷貝到一個大buffer上

const buffer1 = Buffer.from('hello World!');
const buffer2 = Buffer.alloc(10, 1);
buffer1.copy(buffer2,0,0,6); // 將buffer1裡的值拷貝到buffer2中
console.log(buffer1);
console.log(buffer2);
<Buffer 68 65 6c 6c 6f 20 57 6f 72 6c 64 21>
<Buffer 68 65 6c 6c 6f 20 01 01 01 01>

7. Buffer.concat(list[, totalLength])
   連線buffer，把多個buffer連線成一個新的buffer

const buffer1 = Buffer.from('hello');
const buffer2 = Buffer.from('World');
const buffer3 = Buffer.concat([buffer1,buffer2],10);
console.log(buffer3);
<Buffer 68 65 6c 6c 6f 57 6f 72 6c 64>

8. Buffer.isBuffer
   判斷是否是buffer

const buffer1 = Buffer.from('hello');
const buffer2 = 'World';
console.log(Buffer.isBuffer(buffer1));
console.log(Buffer.isBuffer(buffer2));
true false

9. Buffer.length
   獲取buffer的長度,兩種寫法都可

const buffer1 = Buffer.from('hello');
console.log(Buffer.byteLength(buffer1));
console.log(buffer1.length);
5
5

下一節我們將學習fs是如何與buffer一起來讀寫檔案的