狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

在Javascript中，Blob、Stream 和 Buffer 是常見的三種數據處理工具。下面我們一起去學習它們都是如何使用的，它們之間又有何區別和聯系。

Blob

Blob 對象表示一個不可變、原始數據的類文件對象。它可以存儲任何類型的數據，包括圖片、音頻和視頻等多媒體資源。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于數據操作，通常用來讀寫文件。（MDN）

創建Blob對象

創建Blob對象可以使用以下兩種方法：

1. 通過構造函數創建：

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

生成一個包含 text/plain 類型的Blob對象，其中內容為 hello 和 juejin。

2. 通過 URL.createObjectURL() 方法創建：

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

上述代碼中通過 input 元素上傳了一個圖片，生成了一個 blob 對象。

Blob對象讀取

Blob 對象中的數據可以通過以下兩種方式讀取：

1. FileReader對象的 readAsArrayBuffer() 方法可以讀取Blob對象中的二進制數據：

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

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

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的應用場景

Blob 對象可以用于 web 端和服務器端的文件上傳、音視頻播放、數據處理等領域。在前端中，我們可以將 Blob 對象作為表單數據提交到服務器，也可以通過 Blob 對象構建音視頻播放器，實現在線播放音視頻。（文檔）

Stream

Stream 是 Javascript 中數據流處理模塊的一種實現方式。它可以解決內存受限、網絡帶寬有限等問題。

Stream 是一個抽象接口，Node.js 中有很多對象實現了這個接口。例如，對http 服務器發起請求的request 對象就是一個 Stream，還有 stdout（標準輸出）。

Node.js 中的流類型：

• Readable - 可讀操作。

• Writable - 可寫操作。

• Duplex - 可讀可寫操作。

• Transform - 操作被寫入數據，然后讀出結果。

創建Stream對象

在 Node.js 環境下，可以通過fs模塊的 createReadStream() 方法創建一個可讀的 Stream 對象，并通過 pipe() 方法進行數據傳輸：

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

Stream的事件監聽

Stream 對象也是一個事件觸發器，通過監聽 Stream 對象的事件可以實現對數據流處理的控制：

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

Stream的應用場景

Stream對象可以用于大文件的讀取、寫入、壓縮、加密、解密等領域。在 Node.js 環境下，Stream 對象具有非常重要的地位，例如在 HTTP 請求處理、文件系統操作和數據庫讀取等領域中都會用到 Stream。

Buffer

Javascript 語言自身只有字符串數據類型，沒有二進制數據類型。但在處理像 TCP 流或文件流時，必須使用到二進制數據。因此在Node.js中，定義了一個 Buffer 類，該類用來創建一個專門存放二進制數據的緩存區。（文檔）

創建Buffer對象

創建 Buffer 對象有以下幾種方法：

1. 通過 new 關鍵字創建

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

2. 通過 Buffer.alloc() 靜態方法創建：

const buffer = Buffer.alloc(10);

3. 通過 Buffer.from() 靜態方法創建：

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

Buffer的讀寫操作

Buffer 對象可以進行讀寫操作，例如對 Buffer 對象的第一個字節進行讀取：

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

對 Buffer 對象的前兩個字節進行寫入：

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

Buffer的應用場景

Buffer 對象在 Node.js 環境下被廣泛應用于文件流的讀寫、網絡流的傳輸、加密算法的實現等領域，在 Web 端也被一些第三方庫使用。由于 Buffer 對象的特殊性，所以需要注意其內存消耗，避免造成內存泄漏等問題。

總結

Blob、Stream 和 Buffer 是 Javascript 中常用的三種數據處理工具，它們在不同的場景下發揮著重要作用，熟練掌握這些工具是非常有必要的，它可以有效提高數據處理的效率，實現更加復雜的數據操作，幫助我們更高效的完成工作和需求。

作者：王絕境
鏈接：https://juejin.cn/post/7291498745624182821
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。