JS中的常见二进制数据格式
| 格式 | 描述 | 用途 | 示例 |
|---|---|---|---|
| ArrayBuffer | 固定长度的二进制数据缓冲区，不直接操作具体的数据，而是通过类型数组或DataView对象来读写 | 用于存储和处理大量的二进制数据，如文件、图像等 | let buffer = new ArrayBuffer(16); |
| TypedArray | 基于ArrayBuffer对象的视图，提供特定格式的读写接口 | 用于操作具有特定数据类型的二进制数据 | let int32View = new Int32Array(buffer); |
| DataView | 提供对ArrayBuffer的复杂和灵活读写操作，可以读写任意位置的任意类型的数据 | 当需要精确控制二进制数据的读写位置和格式时使用 | let dataView = new DataView(buffer); |
| Blob | 表示不可变的原始数据，通常是二进制数据或文本数据 | 用于处理文件、图片等二进制数据，可以通过URL.createObjectURL()创建对象URL | let blob = new Blob([arrayBuffer], {type: 'image/jpeg'}); |
| File | 继承自Blob，表示用户系统上的具体文件 | 用于处理用户上传的文件，可以获取文件名、大小等信息 | let file = new File([blob], 'filename.jpg', {type: 'image/jpeg'}); |
| Uint8Array | 8位无符号整数类型数组，用于存储0到255之间的整数 | 用于处理8位图像数据、字节流等 | let uint8Array = new Uint8Array(buffer); |
| Uint16Array | 16位无符号整数类型数组，用于存储0到65535之间的整数 | 用于处理音频数据、图像数据等 | let uint16Array = new Uint16Array(buffer); |
| Float32Array | 32位浮点数类型数组，用于存储浮点数 | 用于处理浮点数的二进制数据，如科学计算、物理模拟等 | let float32Array = new Float32Array(buffer); |
部分使用示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>二进制格式转换示例</title></head><body><input type="file" id="fileInput" accept="*" /><button onclick="convertFileToBinaryFormats()">转换文件为二进制格式</button><pre id="output"></pre><script>function convertFileToBinaryFormats() {const fileInput = document.getElementById("fileInput");const file = fileInput.files[0];if (!file) {alert("未选择文件");return;}let reader = new FileReader(); // 使用let而不是constreader.onload = function (event) {const arrayBuffer = event.target.result;// ArrayBufferconsole.log("ArrayBuffer:", arrayBuffer);// TypedArray (例如 Uint8Array)const uint8Array = new Uint8Array(arrayBuffer);console.log("Uint8Array:", uint8Array);// DataViewconst dataView = new DataView(arrayBuffer);console.log("DataView:", dataView);// Blobconst blob = new Blob([arrayBuffer], { type: file.type });console.log("Blob:", blob);// 显示部分Uint8Array内容作为示例const output = `文件类型: ${file.type}<br>`;output += `ArrayBuffer长度: ${arrayBuffer.byteLength} 字节<br>`;output += `Uint8Array前10个字节: ${Array.from(uint8Array.slice(0, 10)).map((b) => b.toString(16).padStart(2, "0")).join(" ")}<br>`;document.getElementById("output").textContent = output;};reader.readAsArrayBuffer(file);}</script></body>
</html>