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

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

Blob

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

創(chuàng)建Blob對象

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

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

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

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

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

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

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

Blob對象讀取

Blob 對象中的數(shù)據(jù)可以通過以下兩種方式讀取：

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

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 端和服務器端的文件上傳、音視頻播放、數(shù)據(jù)處理等領域。在前端中，我們可以將 Blob 對象作為表單數(shù)據(jù)提交到服務器，也可以通過 Blob 對象構(gòu)建音視頻播放器，實現(xiàn)在線播放音視頻。（文檔）

Stream

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

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

Node.js 中的流類型：

• Readable - 可讀操作。

• Writable - 可寫操作。

• Duplex - 可讀可寫操作。

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

創(chuàng)建Stream對象

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

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

Stream的事件監(jiān)聽

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

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

Stream的應用場景

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

Buffer

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

創(chuàng)建Buffer對象

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

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

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

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

const buffer = Buffer.alloc(10);

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

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

Buffer的讀寫操作

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

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

對 Buffer 對象的前兩個字節(jié)進行寫入：

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

Buffer的應用場景

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

總結(jié)

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

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