在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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。