一文搞懂 Blob、Stream 和 Buffer

在JavaScript中，Blob、Stream 和 Buffer 是常见的三种数据处理工具。下面我们一起去学习它们都是如何使用的，它们之间又有何区别和联系。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象 。它可以存储任何类型的数据，包括图片、音频和视频等多媒体资源。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作，通常用来读写文件。（MDN）

创建Blob对象

创建Blob对象可以使用以下两种方法：

通过构造函数创建：

js 复制代码

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

生成一个包含 text/plain 类型的Blob对象，其中内容为 hello 和 juejin。

通过 URL.createObjectURL() 方法创建：

js 复制代码

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

上述代码中通过 input 元素上传了一个图片，生成了一个 blob 对象。

Blob对象读取

Blob 对象中的数据可以通过以下两种方式读取：

FileReader对象的 readAsArrayBuffer() 方法可以读取Blob对象中的二进制数据：

js 复制代码

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

通过 URL.createObjectURL() 方法生成的 Blob 链接可以直接用于 img 标签或 a 标签的下载链接：

js 复制代码

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() 方法进行数据传输：

js 复制代码

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

Stream的事件监听

Stream 对象也是一个事件触发器，通过监听 Stream 对象的事件可以实现对数据流处理的控制：

js 复制代码

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 对象有以下几种方法：

通过 new 关键字创建

js 复制代码

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

通过 Buffer.alloc() 静态方法创建：

js 复制代码

const buffer = Buffer.alloc(10);

通过 Buffer.from() 静态方法创建：

js 复制代码

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

Buffer的读写操作

Buffer 对象可以进行读写操作，例如对 Buffer 对象的第一个字节进行读取：

js 复制代码

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

对 Buffer 对象的前两个字节进行写入：

js 复制代码

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

Buffer的应用场景

Buffer 对象在 Node.js 环境下被广泛应用于文件流的读写、网络流的传输、加密算法的实现等领域，在 Web 端也被一些第三方库使用。由于 Buffer 对象的特殊性，所以需要注意其内存消耗，避免造成内存泄漏等问题。

总结

Blob、Stream 和 Buffer 是 JavaScript 中常用的三种数据处理工具，它们在不同的场景下发挥着重要作用，熟练掌握这些工具是非常有必要的，它可以有效提高数据处理的效率，实现更加复杂的数据操作，帮助我们更高效的完成工作和需求。

往期文章推荐：