ArrayBuffer是二进制数据容器，需通过TypedArray或DataView视图操作；Blob用于封装文件类二进制对象，可与ArrayBuffer互转，适用于文件传输与网络通信。
JavaScript 提供了多种方式来操作二进制数据，特别是在处理文件、网络传输、图像音频处理等场景中，ArrayBuffer 和 Blob 是核心工具。下面介绍它们的基本用法和常见操作。
ArrayBuffer：底层二进制数据容器
ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，需要通过视图（如 Uint8Array、DataView）来访问。
例如创建一个 8 字节的缓冲区并写入数字：
const buffer = new ArrayBuffer(8); const view = new Uint8Array(buffer); view[0] = 42; // 写入一个字节 console.log(view[0]); // 输出: 42
如果需要更灵活地读写不同格式的数据（如整数、浮点数），可以使用 DataView：
立即学习“Java免费学习笔记（深入）”；
const dataView = new DataView(buffer); dataView.setFloat32(0, 3.14); // 在偏移 0 处写入 float console.log(dataView.getFloat32(0)); // 输出: 3.14
TypedArray：便捷的类型化数组
TypedArray（如 Uint8Array、Int16Array）是 ArrayBuffer 的常用视图。它们让操作二进制数据更直观。
从字符串转换为二进制数据：
const encoder = new TextEncoder(); const uint8Array = encoder.encode(“Hello”); console.log(uint8Array); // Uint8Array [72, 101, 108, 108, 111]
再转回字符串：
const decoder = new TextDecoder(); const text = decoder.decode(uint8Array); console.log(text); // 输出: Hello
Blob：表示不可变的二进制大对象
Blob 常用于文件操作，可以包含任意类型的二进制数据，比如图片、视频或下载内容。
创建一个文本 Blob：
const blob = new Blob([“Hello, world!”], { type: “text/plain” }); console.log(blob.size); // 输出: 13 console.log(blob.type); // 输出: text/plain
创建一个包含多种数据类型的 Blob（如 JSON）：
const jsonData = { name: “Alice”, age: 25 }; const jsonBlob = new Blob([JSON.stringify(jsonData)], { type: “application/json” });
ArrayBuffer 与 Blob 的相互转换
在实际开发中，经常需要在这两种格式之间转换。
将 ArrayBuffer 转为 Blob：
const buffer = new Uint8Array([72, 101, 108, 108, 111]); const blob = new Blob([buffer], { type: “text/plain” });
将 Blob 转为 ArrayBuffer：
blob.arrayBuffer().then(buffer => { const arr = new Uint8Array(buffer); console.log(arr); // 可以看到原始字节 });
基本上就这些。掌握 ArrayBuffer、TypedArray 和 Blob 的使用，就能高效处理前端中的大多数二进制任务，比如文件上传、Canvas 图像导出、WebSocket 二进制通信等。关键是理解它们之间的关系：ArrayBuffer 是数据容器，TypedArray 是访问方式，Blob 是用于文件和网络的封装。不复杂但容易忽略细节。
以上就是如何利用JavaScript操作二进制数据，如ArrayBuffer和Blob？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528031.html
微信扫一扫 
支付宝扫一扫 
