JavaScript中的ArrayBuffer怎么用？

ArrayBuffer是JavaScript提供的用于处理原始二进制数据的对象，它代表一段固定长度的内存区域，本身不能直接读取或修改内容，需要借助视图对象来完成操作，常用于文件处理、网络传输、音视频编解码等需要处理二进制数据的场景。

ArrayBuffer的基础特性

ArrayBuffer的核心特点是长度固定，一旦创建就无法修改大小，它存储的是原始的二进制字节，没有类型信息，所以不能直接通过下标访问内容。我们可以通过new ArrayBuffer(length)来创建指定字节长度的ArrayBuffer实例，其中length表示需要分配的字节数。

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

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

使用TypedArray操作ArrayBuffer

TypedArray是一组类型化数组的统称，包括Int8Array、Uint8Array、Int16Array等，它们可以直接绑定到ArrayBuffer上，按照指定的数据类型来读写缓冲区的内容。创建TypedArray时需要传入ArrayBuffer实例，还可以指定字节偏移量和长度。

以Uint8Array为例，每个元素占1个字节，8字节的ArrayBuffer可以存储8个Uint8Array元素：

const buffer = new ArrayBuffer(8);
// 创建绑定到buffer的Uint8Array视图，从0字节开始，长度为8
const uint8View = new Uint8Array(buffer);
// 给视图元素赋值
uint8View[0] = 10;
uint8View[1] = 20;
console.log(uint8View[0]); // 输出10
console.log(uint8View[1]); // 输出20

如果用Int16Array来操作同一个ArrayBuffer，每个元素占2个字节，8字节的缓冲区可以存储4个Int16Array元素：

const buffer = new ArrayBuffer(8);
// 创建Int16Array视图，每个元素2字节，共4个元素
const int16View = new Int16Array(buffer);
int16View[0] = 100;
int16View[1] = 200;
console.log(int16View[0]); // 输出100
console.log(int16View[1]); // 输出200

使用DataView操作ArrayBuffer

DataView提供了更灵活的方式操作ArrayBuffer，它支持在缓冲区的任意位置读写不同数据类型的值，不需要像TypedArray那样固定元素类型。创建DataView时同样需要传入ArrayBuffer，也可以指定字节偏移量和长度。

下面的示例演示了用DataView在ArrayBuffer的不同位置写入不同类型的数据：

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);
// 在0字节位置写入一个8位无符号整数
dataView.setUint8(0, 10);
// 在1字节位置写入一个16位有符号整数
dataView.setInt16(1, 300);
// 读取对应位置的值
console.log(dataView.getUint8(0)); // 输出10
console.log(dataView.getInt16(1)); // 输出300

常见使用场景

ArrayBuffer最常见的使用场景包括处理网络请求的二进制响应、操作文件二进制内容、音视频数据编解码等。比如使用Fetch API获取二进制数据时，可以指定响应类型为arrayBuffer，然后直接拿到ArrayBuffer实例进行处理：

fetch('https://ipipp.com/test.bin')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const view = new Uint8Array(buffer);
    console.log('二进制数据长度:', view.length);
  });

注意事项

• ArrayBuffer的长度一旦创建就无法修改，如果需要更大的缓冲区，需要重新创建并拷贝数据。
• TypedArray和DataView操作的是同一个ArrayBuffer的内存，修改其中一个视图的内容，另一个视图对应的内容也会变化。
• 操作ArrayBuffer时要注意字节对齐问题，比如Int16Array的元素需要2字节对齐，访问时偏移量最好是2的倍数，否则可能出现异常。

ArrayBuffer是JavaScript处理二进制数据的基础，掌握它的使用方法能帮助你更高效地完成涉及二进制数据的开发任务，建议结合实际场景多练习不同类型的视图操作。

ArrayBufferTypedArrayDataView二进制数据内存操作修改时间：2026-06-05 02:23:49