在Javascript中，Blob、Stream 和 Buffer 是常見(jiàn)的三種數(shù)據(jù)處理工具。下面我們一起去學(xué)習(xí)它們都是如何使用的，它們之間又有何區(qū)別和聯(lián)系。

Blob

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。它可以存儲(chǔ)任何類(lèi)型的數(shù)據(jù)，包括圖片、音頻和視頻等多媒體資源。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作，通常用來(lái)讀寫(xiě)文件。（MDN）

創(chuàng)建Blob對(duì)象

創(chuàng)建Blob對(duì)象可以使用以下兩種方法：

1. 通過(guò)構(gòu)造函數(shù)創(chuàng)建：

const myBlob = new Blob(["hello", "juejin"], { type: "text/plain" });

生成一個(gè)包含 text/plain 類(lèi)型的Blob對(duì)象，其中內(nèi)容為 hello 和 juejin。

2. 通過(guò) URL.createObjectURL() 方法創(chuàng)建：

const file = document.getElementById('input').files[0];  
const url = URL.createObjectURL(file);  
const blob = new Blob([file], {type: 'image/png'});

上述代碼中通過(guò) input 元素上傳了一個(gè)圖片，生成了一個(gè) blob 對(duì)象。

Blob對(duì)象讀取

Blob 對(duì)象中的數(shù)據(jù)可以通過(guò)以下兩種方式讀?。?/p>

1. FileReader對(duì)象的 readAsArrayBuffer() 方法可以讀取Blob對(duì)象中的二進(jìn)制數(shù)據(jù)：

const reader = new FileReader(); reader.readAsArrayBuffer(blob); 
reader.onload = function () {     
var arrayBuffer = reader.result;     
console.log(arrayBuffer); 
}

2. 通過(guò) URL.createObjectURL() 方法生成的 Blob 鏈接可以直接用于 img 標(biāo)簽或 a 標(biāo)簽的下載鏈接：

let xhr = new XMLHttpRequest(); xhr.open('GET', someUrl); 
xhr.responseType = 'blob';  
xhr.onload = function () {   
let blob = xhr.response;   
const blob = new Blob(['\ufeff', blob], { type: 'text/csv,charset=utf-8' });  
 const url = window.URL.createObjectURL(blob); 
 };  
 xhr.send();

Blob的應(yīng)用場(chǎng)景

Blob 對(duì)象可以用于 web 端和服務(wù)器端的文件上傳、音視頻播放、數(shù)據(jù)處理等領(lǐng)域。在前端中，我們可以將 Blob 對(duì)象作為表單數(shù)據(jù)提交到服務(wù)器，也可以通過(guò) Blob 對(duì)象構(gòu)建音視頻播放器，實(shí)現(xiàn)在線播放音視頻。（文檔）

Stream

Stream 是 Javascript 中數(shù)據(jù)流處理模塊的一種實(shí)現(xiàn)方式。它可以解決內(nèi)存受限、網(wǎng)絡(luò)帶寬有限等問(wèn)題。

Stream 是一個(gè)抽象接口，Node.js 中有很多對(duì)象實(shí)現(xiàn)了這個(gè)接口。例如，對(duì)http 服務(wù)器發(fā)起請(qǐng)求的request 對(duì)象就是一個(gè) Stream，還有 stdout（標(biāo)準(zhǔn)輸出）。

Node.js 中的流類(lèi)型：

• Readable - 可讀操作。

• Writable - 可寫(xiě)操作。

• Duplex - 可讀可寫(xiě)操作。

• Transform - 操作被寫(xiě)入數(shù)據(jù)，然后讀出結(jié)果。

創(chuàng)建Stream對(duì)象

在 Node.js 環(huán)境下，可以通過(guò)fs模塊的 createReadStream() 方法創(chuàng)建一個(gè)可讀的 Stream 對(duì)象，并通過(guò) pipe() 方法進(jìn)行數(shù)據(jù)傳輸：

const fs = require('fs'); 
const readStream = fs.createReadStream('a.txt'); 
const writeStream = fs.createWriteStream('b.txt');   
readStream.pipe(writeStream);

Stream的事件監(jiān)聽(tīng)

Stream 對(duì)象也是一個(gè)事件觸發(fā)器，通過(guò)監(jiān)聽(tīng) Stream 對(duì)象的事件可以實(shí)現(xiàn)對(duì)數(shù)據(jù)流處理的控制：

readStream.on('data', chunk => {     
console.log(chunk); 
}).on('end', () => {     console.log('結(jié)束'); });

Stream的應(yīng)用場(chǎng)景

Stream對(duì)象可以用于大文件的讀取、寫(xiě)入、壓縮、加密、解密等領(lǐng)域。在 Node.js 環(huán)境下，Stream 對(duì)象具有非常重要的地位，例如在 HTTP 請(qǐng)求處理、文件系統(tǒng)操作和數(shù)據(jù)庫(kù)讀取等領(lǐng)域中都會(huì)用到 Stream。

Buffer

Javascript 語(yǔ)言自身只有字符串?dāng)?shù)據(jù)類(lèi)型，沒(méi)有二進(jìn)制數(shù)據(jù)類(lèi)型。但在處理像 TCP 流或文件流時(shí)，必須使用到二進(jìn)制數(shù)據(jù)。因此在Node.js中，定義了一個(gè) Buffer 類(lèi)，該類(lèi)用來(lái)創(chuàng)建一個(gè)專(zhuān)門(mén)存放二進(jìn)制數(shù)據(jù)的緩存區(qū)。（文檔）

創(chuàng)建Buffer對(duì)象

創(chuàng)建 Buffer 對(duì)象有以下幾種方法：

1. 通過(guò) new 關(guān)鍵字創(chuàng)建

const buffer = new Buffer('hello', 'utf-8');

2. 通過(guò) Buffer.alloc() 靜態(tài)方法創(chuàng)建：

const buffer = Buffer.alloc(10);

3. 通過(guò) Buffer.from() 靜態(tài)方法創(chuàng)建：

const buffer = Buffer.from('juejin', 'utf-8');

Buffer的讀寫(xiě)操作

Buffer 對(duì)象可以進(jìn)行讀寫(xiě)操作，例如對(duì) Buffer 對(duì)象的第一個(gè)字節(jié)進(jìn)行讀取：

const buffer = Buffer.from('hello', 'utf-8'); const firstByte = buffer[0]; console.log(firstByte);

對(duì) Buffer 對(duì)象的前兩個(gè)字節(jié)進(jìn)行寫(xiě)入：

const buffer = Buffer.alloc(5); buffer.writeUInt16BE(0x1234, 0); console.log(buffer.toString('hex'));

Buffer的應(yīng)用場(chǎng)景

Buffer 對(duì)象在 Node.js 環(huán)境下被廣泛應(yīng)用于文件流的讀寫(xiě)、網(wǎng)絡(luò)流的傳輸、加密算法的實(shí)現(xiàn)等領(lǐng)域，在 Web 端也被一些第三方庫(kù)使用。由于 Buffer 對(duì)象的特殊性，所以需要注意其內(nèi)存消耗，避免造成內(nèi)存泄漏等問(wèn)題。

總結(jié)

Blob、Stream 和 Buffer 是 Javascript 中常用的三種數(shù)據(jù)處理工具，它們?cè)诓煌膱?chǎng)景下發(fā)揮著重要作用，熟練掌握這些工具是非常有必要的，它可以有效提高數(shù)據(jù)處理的效率，實(shí)現(xiàn)更加復(fù)雜的數(shù)據(jù)操作，幫助我們更高效的完成工作和需求。

作者：王絕境
鏈接：https://juejin.cn/post/7291498745624182821
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。