JavaScript通过ArrayBuffer提供固定大小的原始二进制内存块，再借助TypedArray或DataView视图以特定类型和字节序读写数据，实现高效处理二进制流，广泛应用于WebSocket通信、文件解析等场景。
JavaScript处理二进制数据，其核心思想是提供一个原始的、固定大小的内存块——ArrayBuffer，它本身不包含任何格式信息。接着，通过TypedArray（如Uint8Array、Int32Array）或DataView这些“视图”，我们才能以特定的数据类型和字节序来解读和操作这块内存。这套机制在网络通信中，比如WebSocket收发二进制消息，或是前端解析文件（如图片、音频、压缩包）时，扮演着至关重要的角色，它让浏览器端的JavaScript能够直接、高效地与底层字节流打交道，这感觉就像是打开了通往计算机更深层能力的一扇门。
要高效地利用ArrayBuffer和视图处理二进制数据，我们首先要理解它们各自的职责。ArrayBuffer就像一块空白的画板，只提供内存空间，不关心你画什么。而TypedArray和DataView则是不同的画笔和眼镜，让你能以特定的方式去“看”和“操作”这块画板上的内容。
1. ArrayBuffer：原始内存块ArrayBuffer是一个固定长度的原始二进制数据缓冲区。它不能直接操作，因为它只是一个内存区域，没有提供任何读写方法。你需要通过它的视图来访问其内容。
const buffer = new ArrayBuffer(16); // 创建一个16字节的缓冲区 console.log(buffer.byteLength); // 16
2. TypedArray：类型化数组视图TypedArray是ArrayBuffer最常见的视图。它将ArrayBuffer中的字节解释为特定类型的数值数组。例如，Uint8Array将每个字节视为一个无符号8位整数，而Int32Array则将每四个字节视为一个有符号32位整数。
立即学习“Java免费学习笔记（深入）”；
const buffer = new ArrayBuffer(16); const uint8View = new Uint8Array(buffer); // 创建一个Uint8Array视图 uint8View[0] = 255; uint8View[1] = 128; console.log(uint8View); // Uint8Array [255, 128, 0, 0, ...] const int32View = new Int32Array(buffer); // 创建一个Int32Array视图 int32View[0] = 123456789; // 写入一个32位整数，会占据前4个字节 console.log(int32View); // Int32Array [123456789, 0, 0, 0] console.log(uint8View); // Uint8Array [21, 205, 91, 7, 0, ...] (原始字节内容已改变)
TypedArray在处理同类型数据序列时非常高效，比如图像的像素数据或音频的采样数据。
3. DataView：灵活的字节视图DataView提供了一种更精细、更灵活的方式来操作ArrayBuffer。它允许你在任意字节偏移量处读写不同大小和字节序（大端序/小端序）的数值。这在处理混合数据类型或需要严格控制字节序的协议时尤其有用。
const buffer = new ArrayBuffer(8); // 8字节缓冲区 const dataView = new DataView(buffer); // 写入一个无符号8位整数 dataView.setUint8(0, 0x41); // 偏移量0，写入字符'A'的ASCII值 // 写入一个大端序的无符号16位整数 dataView.setUint16(1, 0x4243, false); // 偏移量1，写入0x4243 (大端序) // 写入一个小端序的浮点数 dataView.setFloat32(3, 3.14159, true); // 偏移量3，写入3.14159 (小端序) console.log(new Uint8Array(buffer)); // 看看原始字节 // 读取数据 console.log(dataView.getUint8(0)); // 65 (0x41) console.log(dataView.getUint16(1, false)); // 16963 (0x4243) console.log(dataView.getFloat32(3, true)); // 3.141590118408203
DataView的get和set方法都有一个可选的littleEndian参数，默认为false（大端序），这对于跨平台或特定协议的字节序兼容性至关重要。
在网络通信或文件解析中的应用：
ArrayBuffer。发送时，socket.send(buffer)即可。接收时，event.data如果是二进制数据，就会是ArrayBuffer类型，你可以直接对其创建TypedArray或DataView进行解析。FileReader 或 fetch):FileReader的readAsArrayBuffer()方法可以将用户选择的文件读取为一个ArrayBuffer。fetch API获取二进制数据时，response.arrayBuffer()方法会返回一个Promise，解析后就是ArrayBuffer。
一旦获取到ArrayBuffer，就可以根据文件格式规范（如JPEG、WAV、ZIP等）使用DataView在特定偏移量读取文件头、元数据和实际数据块。这是一个很好的问题，而且我个人觉得，理解这一点是深入掌握ArrayBuffer的关键。简单来说，JavaScript的普通数组（Array）设计之初就不是为了直接操作原始二进制数据。它们是高度抽象的、动态的、异构的集合。
一个普通的JavaScript数组，比如[1, "hello", {a: 1}]，可以存储任何类型的值，而且长度是可变的。当你存储数字时，这些数字在底层可能被优化存储，但它们仍然是JavaScript的Number类型，是浮点数表示，而不是像C语言中int或char那样的固定位宽整数。这意味着：
Number对象，反之亦然），以及潜在的垃圾回收管理。这对于需要大量、高速处理数字序列（如图像像素、音频采样）的场景来说，性能开销巨大。ArrayBuffer和TypedArray正是为了填补这个空白而生，它们提供了一种直接映射到底层内存的方式，其操作几乎可以达到原生语言的效率。ArrayBuffer。如果你试图用普通数组去对接这些API，你会发现要么行不通，要么需要大量的手动转换，效率低下且容易出错。所以，当我们需要进行字节级别的操作，或者与那些需要原始二进制数据的Web API交互时，ArrayBuffer和TypedArray是不可替代的。它们提供了一种桥梁，让JavaScript能够以一种高效且可控的方式，触及到更接近硬件的层面。
在现代Web应用中，有效地发送和接收二进制数据是实现高性能、富交互体验的关键。这通常涉及到与服务器进行更底层的数据交换，而不是传统的JSON或文本。
1. 使用WebSocket进行实时二进制通信：
WebSocket是进行双向、全双工通信的首选，它原生支持发送和接收二进制数据。
发送： 你可以直接将一个ArrayBuffer或TypedArray实例发送出去。
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
const buffer = new ArrayBuffer(4);
const view = new Uint8Array(buffer);
view[0] = 0x01; // 消息类型
view[1] = 0x02; // 命令
view[2] = 0x03; // 数据
view[3] = 0x04;
ws.send(buffer); // 直接发送ArrayBuffer
// 也可以发送TypedArray: ws.send(view);
};服务器端收到后，会将其作为二进制数据处理。
接收： 当WebSocket接收到二进制消息时，event.data将是一个ArrayBuffer实例。
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
console.log('收到二进制数据:', event.data);
const dataView = new DataView(event.data);
const messageType = dataView.getUint8(0);
const payloadLength = dataView.getUint16(1, false); // 假设第二个字节开始是长度，大端序
// 根据消息类型和长度解析后续数据
// ...
} else {
console.log('收到文本数据:', event.data);
}
};这里需要注意的是，你可能需要设置ws.binaryType = 'arraybuffer';来确保接收到的二进制数据是ArrayBuffer类型（通常是默认值）。
2. 使用Fetch API发送和接收二进制数据：
Fetch API是现代浏览器中进行HTTP请求的首选。它也可以处理二进制数据，尤其适合文件上传或下载。
发送 (例如，上传文件或二进制流)：
你可以将ArrayBuffer或Blob作为body发送。
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
if (file) {
const arrayBuffer = await file.arrayBuffer(); // 将文件读取为ArrayBuffer
fetch('/upload-binary', {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream' // 声明为二进制流
},
body: arrayBuffer // 直接发送ArrayBuffer
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));
}
});接收 (例如，下载图片、音频或自定义二进制文件)：Response对象提供了arrayBuffer()方法来将响应体解析为ArrayBuffer。
fetch('/get-binary-data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.arrayBuffer(); // 解析为ArrayBuffer
})
.then(buffer => {
console.log('下载的二进制数据:', buffer);
const dataView = new DataView(buffer);
// 进一步解析，比如判断文件类型，或者处理自定义协议
// ...
})
.catch(error => console.error('下载失败:', error));关键考虑点：
DataView在这里能帮助你精确地读写这些头部信息。DataView的get/set方法时，正确设置littleEndian参数。例如，dataView.getUint32(0, true)表示以小端序读取32位无符号整数。fetch）允许你以流式方式处理响应，这对于内存管理和用户体验都很有益。有效地处理二进制数据，不仅仅是技术层面的操作，更是一种对数据传输效率和底层机制的深刻理解。这使得我们能够构建出更强大、更高效的Web应用。
在前端解析文件，尤其是二进制格式的文件（如图片、音频、视频、PDF等），ArrayBuffer和DataView简直是不可或缺的工具。它们为JavaScript提供了一双“透视眼”和一双“手术刀”，让我们能够直接深入文件的字节流，理解其内部结构。
1. 获取文件的ArrayBuffer：
首先，无论是用户上传的本地文件，还是从网络下载的远程文件，我们都需要将其内容获取为ArrayBuffer。
本地文件： 使用FileReader API。
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const arrayBuffer = e.target.result; // 这里就是ArrayBuffer
console.log('文件ArrayBuffer:', arrayBuffer);
// 接下来就可以用DataView解析了
parseFile(arrayBuffer);
};
reader.readAsArrayBuffer(file); // 以ArrayBuffer形式读取文件
}
});远程文件： 使用fetch API。
async function downloadAndParseRemoteFile(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const arrayBuffer = await response.arrayBuffer(); // 获取ArrayBuffer
console.log('远程文件ArrayBuffer:', arrayBuffer);
parseFile(arrayBuffer);
} catch (error) {
console.error('下载或解析文件失败:', error);
}
}
// downloadAndParseRemoteFile('path/to/your/image.jpg');2. DataView的解析魔法：
一旦有了ArrayBuffer，DataView就登场了。文件格式通常都有一个严格的二进制结构：文件头（magic number）、元数据（尺寸、编码、采样率等）、以及实际的数据块。DataView允许我们精确地读取这些结构化信息。
以解析一个简单的WAV音频文件为例（简化版）：
WAV文件通常以一个RIFF块开始，接着是WAVE格式块，然后是fmt子块（包含音频格式信息），最后是data子块（包含实际音频数据）。
function parseWAVHeader(arrayBuffer) {
const dataView = new DataView(arrayBuffer);
let offset = 0;
// 读取RIFF块
const riffChunkId = String.fromCharCode(dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++)); // "RIFF"
const fileSize = dataView.getUint32(offset, true); // 文件大小，小端序
offset += 4;
const waveFormat = String.fromCharCode(dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++)); // "WAVE"
offset += 4; // 跳过"WAVE"
// 读取fmt子块
const fmtChunkId = String.fromCharCode(dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++)); // "fmt "
const fmtChunkSize = dataView.getUint32(offset, true); // fmt块大小
offset += 4;
const audioFormat = dataView.getUint16(offset, true); // 音频格式 (1 = PCM)
offset += 2;
const numChannels = dataView.getUint16(offset, true); // 声道数
offset += 2;
const sampleRate = dataView.getUint32(offset, true); // 采样率
offset += 4;
const byteRate = dataView.getUint32(offset, true); // 字节率
offset += 4;
const blockAlign = dataView.getUint16(offset, true); // 块对齐
offset += 2;
const bitsPerSample = dataView.getUint16(offset, true); // 每采样位数
offset += 2;
// 假设我们已经解析了fmt块，现在跳过剩余的fmt块数据
offset += (fmtChunkSize - 16); // 16是fmt块固定部分的大小
// 查找data子块（可能会有其他块在中间，需要循环查找）
let dataChunkId = '';
let dataChunkSize = 0;
while (offset < arrayBuffer.byteLength - 8) { // 确保还有足够的空间读取ID和大小
dataChunkId = String.fromCharCode(dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++), dataView.getUint8(offset++));
dataChunkSize = dataView.getUint32(offset, true);
offset += 4;
if (dataChunkId === 'data') {
break;
}
offset += dataChunkSize; // 跳过当前块
}
console.log('--- WAV Header Info ---');
console.log(`RIFF ID: ${riffChunkId}`);
console.log(`File Size: ${fileSize} bytes`);
console.log(`WAVE Format: ${waveFormat}`);
console.log(`FMT ID: ${fmtChunkId}`);
console.log(`Audio Format: ${audioFormat} (1=PCM)`);
console.log(`Channels: ${numChannels}`);
console.log(`Sample Rate: ${sampleRate} Hz`);
console.log(`Bits per Sample: ${bitsPerSample}`);
console.log(`Data Chunk ID: ${dataChunkId}`);
console.log(`Data Chunk Size: ${dataChunkSize} bytes`);
console.log(`Audio Data Starts at Offset: ${offset}`);
// 音频数据部分可以创建一个新的TypedArray视图
const audioData = new Int16Array(arrayBuffer, offset, dataChunkSize / (bitsPerSample / 8));
// console.log('First 10 audio samples:', audioData.slice(0, 10));
return {以上就是如何利用JavaScript的数组缓冲和视图处理二进制数据，以及它在网络通信或文件解析中的使用？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
839
