JavaScript中的ArrayBuffer和TypedArray如何操作二进制数据？

JavaScript中的ArrayBuffer和TypedArray是处理二进制数据的核心工具，二者配合可以完成对二进制数据的创建、读取、修改等操作，适用于文件处理、网络通信、音视频编码等多种场景。

ArrayBuffer基础概念

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区，它本身不能直接读写，需要配合视图对象（如TypedArray）来操作其中的数据。创建ArrayBuffer时需要指定缓冲区的大小，单位是字节。

下面的代码演示了如何创建一个长度为8字节的ArrayBuffer：

// 创建一个8字节的ArrayBuffer
const buffer = new ArrayBuffer(8);
console.log(buffer.byteLength); // 输出8，表示缓冲区大小为8字节

TypedArray的类型与基本使用

TypedArray是一组类型化数组的统称，不同类型的TypedArray对应不同的数据类型和字节长度，常见的TypedArray类型如下：

TypedArray可以基于已有的ArrayBuffer创建，也可以直接创建指定长度的数组。基于ArrayBuffer创建时，可以指定字节偏移量和长度，来操作缓冲区中的某一段数据。

下面的代码演示了基于ArrayBuffer创建Uint8Array并操作数据：

// 创建8字节的ArrayBuffer
const buffer = new ArrayBuffer(8);
// 基于buffer创建Uint8Array视图，从偏移量0开始，使用全部8字节
const uint8View = new Uint8Array(buffer);
// 给视图元素赋值
uint8View[0] = 255;
uint8View[1] = 128;
console.log(uint8View[0]); // 输出255
console.log(uint8View[1]); // 输出128

// 创建从偏移量2开始，长度为4的Uint16Array视图
const uint16View = new Uint16Array(buffer, 2, 4);
console.log(uint16View.length); // 输出4，表示这个视图有4个元素，总共占用8字节

操作二进制数据的完整示例

下面通过一个完整的示例演示如何使用ArrayBuffer和TypedArray拼接多个数值到二进制缓冲区，再读取出来：

// 需求：将1个Uint8数值、1个Uint16数值、1个Float32数值存入二进制缓冲区
// 计算总字节数：1 + 2 + 4 = 7字节
const totalBytes = 1 + 2 + 4;
const buffer = new ArrayBuffer(totalBytes);

// 创建对应的TypedArray视图
const uint8Part = new Uint8Array(buffer, 0, 1);
const uint16Part = new Uint16Array(buffer, 1, 1);
const float32Part = new Float32Array(buffer, 3, 1);

// 写入数据
uint8Part[0] = 100;
uint16Part[0] = 500;
float32Part[0] = 3.14;

// 读取数据验证
console.log('Uint8值：', uint8Part[0]); // 输出100
console.log('Uint16值：', uint16Part[0]); // 输出500
console.log('Float32值：', float32Part[0]); // 输出3.14

注意事项

• ArrayBuffer的大小一旦创建就无法修改，如果需要更大的缓冲区，只能重新创建。
• 不同的TypedArray视图操作同一个ArrayBuffer时，修改数据会互相影响，因为它们指向同一块内存区域。
• 使用DataView也可以操作ArrayBuffer，它比TypedArray更灵活，支持不同字节序的读写，适合处理复杂的二进制协议数据。

下面的代码演示了使用DataView读取上面示例中的二进制数据：

const buffer = new ArrayBuffer(7);
const dataView = new DataView(buffer);
// 写入数据
dataView.setUint8(0, 100);
dataView.setUint16(1, 500);
dataView.setFloat32(3, 3.14);
// 读取数据
console.log(dataView.getUint8(0)); // 100
console.log(dataView.getUint16(1)); // 500
console.log(dataView.getFloat32(3)); // 3.14

ArrayBufferTypedArray二进制数据JavaScript修改时间：2026-07-18 20:18:24