JavaScript中的ArrayBuffer和类型化数组是什么，怎么处理二进制数据

JavaScript中的ArrayBuffer和类型化数组是处理二进制数据的核心工具，二者配合可以实现对原始二进制数据的高效读写和操作，满足各类需要直接处理字节数据的场景需求。

什么是ArrayBuffer

ArrayBuffer是JavaScript中用来表示通用的、固定长度的原始二进制数据缓冲区的对象，它本身不能直接读写，需要通过视图来操作。你可以把ArrayBuffer理解成一块连续的内存空间，里面存储的都是原始的字节数据，没有类型信息，也没有提供直接访问这些数据的方法。

创建ArrayBuffer的方式很简单，只需要传入需要的字节长度即可：

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

类型化数组的作用

类型化数组是ArrayBuffer的视图，它提供了对ArrayBuffer中数据的类型化访问方式，不同的类型化数组对应不同的数据类型和字节长度。常见的类型化数组有以下几种：

• Int8Array：8位有符号整数，每个元素占1字节
• Uint8Array：8位无符号整数，每个元素占1字节
• Int16Array：16位有符号整数，每个元素占2字节
• Int32Array：32位有符号整数，每个元素占4字节
• Float32Array：32位浮点数，每个元素占4字节
• Float64Array：64位浮点数，每个元素占8字节

创建类型化数组

类型化数组的创建方式有多种，既可以直接基于ArrayBuffer创建，也可以直接指定长度或者传入数组初始化：

// 方式1：基于已有的ArrayBuffer创建
const buffer = new ArrayBuffer(16);
// 创建一个Int32Array视图，从buffer的0字节开始，读取4个元素（共16字节）
const int32View = new Int32Array(buffer, 0, 4);

// 方式2：直接指定长度创建，内部会自动创建对应长度的ArrayBuffer
const uint8Arr = new Uint8Array(4); // 创建长度为4的Uint8Array，每个元素1字节，总占4字节

// 方式3：传入普通数组初始化
const floatArr = new Float32Array([1.2, 3.4, 5.6]);
console.log(floatArr.length); // 输出3

ArrayBuffer与类型化数组的配合操作

同一个ArrayBuffer可以被多个不同类型的类型化数组视图访问，只要视图的范围不重叠或者按需操作，就可以实现对同一段二进制数据的不同解读：

const buffer = new ArrayBuffer(4);
// 用Uint8Array访问，按1字节拆分
const uint8View = new Uint8Array(buffer);
// 用Uint16Array访问，按2字节拆分
const uint16View = new Uint16Array(buffer);

uint8View[0] = 0xFF;
uint8View[1] = 0x0F;
// 读取Uint16Array的第一个元素，小端序下值为0x0FFF
console.log(uint16View[0].toString(16)); // 输出fff

需要注意的是，类型化数组的读写遵循当前平台的字节序，大部分桌面浏览器是 little-endian（小端序），如果需要统一字节序可以使用DataView视图，它提供了更灵活的读写方式，可以指定读写时的字节序：

const buffer = new ArrayBuffer(2);
const dataView = new DataView(buffer);
// 以大端序写入一个16位无符号整数
dataView.setUint16(0, 0x1234, true); // 第三个参数true表示小端序，false表示大端序
console.log(dataView.getUint8(0).toString(16)); // 小端序下第一个字节是0x34

实际应用场景示例

场景1：读取文件二进制内容

通过FileReader读取用户上传的文件，拿到ArrayBuffer后处理二进制数据：

// 假设页面有一个id为fileInput的文件上传控件
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function() {
    const buffer = reader.result; // 这里的result就是ArrayBuffer
    const uint8View = new Uint8Array(buffer);
    // 这里可以处理文件的二进制内容，比如判断文件类型
    console.log('文件前两个字节:', uint8View[0], uint8View[1]);
  };
  reader.readAsArrayBuffer(file);
});

场景2：网络传输二进制数据

使用WebSocket传输二进制数据时，可以直接发送ArrayBuffer或者类型化数组：

const ws = new WebSocket('ws://127.0.0.1:8080');
ws.onopen = function() {
  const buffer = new ArrayBuffer(4);
  const int32View = new Int32Array(buffer);
  int32View[0] = 100;
  // 发送ArrayBuffer
  ws.send(buffer);
  // 也可以直接发送类型化数组
  const uint8Arr = new Uint8Array([1, 2, 3]);
  ws.send(uint8Arr);
};

注意事项

• ArrayBuffer的长度是固定的，创建之后无法修改，如果需要可变长度的二进制缓冲区，可以使用Uint8Array配合slice方法或者手动复制数据实现。
• 类型化数组的长度指的是元素的个数，不是字节数，计算总字节数需要用byteLength属性，而不是length属性。
• 类型化数组的操作比普通数组更快，适合处理大量数值数据的场景，但不支持普通数组的一些方法，比如push、pop等，需要操作的话可以转为普通数组再处理。

ArrayBuffer类型化数组javascript二进制数据修改时间：2026-06-10 01:51:35