JavaScript中的类型化数组是一组用于操作二进制数据的对象，核心基础是ArrayBuffer，它代表一段原始的、固定长度的二进制数据缓冲区，本身无法直接读写，需要配合视图类来操作其中的数据。
ArrayBuffer基础概念
ArrayBuffer是JavaScript中用于表示通用、固定长度的原始二进制数据缓冲区的对象，它的大小在创建时确定，之后无法修改。它本身不提供任何读写数据的方法，只能通过对应的视图来操作缓冲区中的数据。
创建ArrayBuffer的语法非常简单，只需要传入需要的字节数即可：
// 创建一个长度为8字节的ArrayBuffer const buffer = new ArrayBuffer(8); console.log(buffer.byteLength); // 输出8，表示缓冲区大小为8字节
类型化数组TypedArray的实现
TypedArray是一组构造函数的总称，每个构造函数对应一种特定的数据类型，用来将ArrayBuffer中的数据按照指定类型进行读写。常见的TypedArray类型包括Int8Array、Uint8Array、Int16Array、Uint16Array、Float32Array等。
TypedArray的创建方式有多种，最常见的是基于已有的ArrayBuffer创建，同时可以指定字节偏移量和长度：
// 基于前面的8字节buffer创建Uint8Array视图 // 从偏移0开始，使用全部8字节，每个元素占1字节，共8个元素 const uint8View = new Uint8Array(buffer); console.log(uint8View.length); // 输出8 // 设置第一个元素的值 uint8View[0] = 255; console.log(uint8View[0]); // 输出255 // 创建Int16Array视图，从偏移0开始，使用前4字节，每个元素占2字节，共2个元素 const int16View = new Int16Array(buffer, 0, 2); int16View[0] = 100; console.log(int16View[0]); // 输出100
不同的TypedArray类型对应不同的数据范围和字节长度，具体差异可以通过下表查看：
| 类型 | 每个元素字节数 | 描述 |
|---|---|---|
| Int8Array | 1 | 8位有符号整数，范围-128到127 |
| Uint8Array | 1 | 8位无符号整数，范围0到255 |
| Int16Array | 2 | 16位有符号整数，范围-32768到32767 |
| Uint16Array | 2 | 16位无符号整数，范围0到65535 |
| Float32Array | 4 | 32位浮点数 |
| Float64Array | 8 | 64位浮点数 |
使用DataView操作复杂二进制数据
当需要处理不同数据类型的混合二进制数据，或者需要更灵活的控制读写方式时，可以使用DataView视图。DataView也基于ArrayBuffer，但是可以在同一个缓冲区中读写不同类型的数据，并且可以指定读写时使用大端序还是小端序。
// 创建16字节的ArrayBuffer const dataBuffer = new ArrayBuffer(16); // 创建DataView视图 const dataView = new DataView(dataBuffer); // 在偏移0处写入一个32位整数 dataView.setInt32(0, 123456); // 在偏移4处写入一个浮点数 dataView.setFloat32(4, 3.14); // 在偏移8处写入一个8位无符号整数 dataView.setUint8(8, 200); // 读取对应位置的数据 console.log(dataView.getInt32(0)); // 输出123456 console.log(dataView.getFloat32(4)); // 输出3.14 console.log(dataView.getUint8(8)); // 输出200 // 指定使用小端序读写，第二个参数传true表示小端序 dataView.setInt16(10, 100, true); console.log(dataView.getInt16(10, true)); // 输出100
类型化数组的常见应用场景
类型化数组和ArrayBuffer在Web开发中有很多实际应用场景，比如处理Canvas的图像数据、处理WebSocket传输的二进制数据、操作音频视频相关的二进制缓冲区、处理文件上传时的二进制内容等。
以下是一个简单的Canvas图像数据处理的示例，通过Uint8ClampedArray操作图像的像素数据：
// 假设已经有一个canvas元素和对应的2d上下文ctx
// 获取canvas的图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// imageData.data就是Uint8ClampedArray类型，包含RGBA四个通道的数据
const pixelData = imageData.data;
// 将所有像素的红色通道值设为255
for (let i = 0; i < pixelData.length; i += 4) {
pixelData[i] = 255; // R通道
}
// 将修改后的数据放回canvas
ctx.putImageData(imageData, 0, 0);
注意事项
- ArrayBuffer的大小一旦创建就无法修改，如果需要更大的缓冲区，只能重新创建新的ArrayBuffer并复制数据。
- 多个TypedArray或者DataView可以共享同一个ArrayBuffer，修改其中一个视图的数据会影响其他共享该缓冲区的视图。
- TypedArray和普通的Array不同，它没有数组的很多方法比如push、pop等，也不支持稀疏数组，长度是固定的。
- 使用DataView读写数据时，如果偏移量加上对应类型的长度超过ArrayBuffer的总长度，会抛出RangeError错误。
ArrayBuffer类型化数组TypedArrayJavaScriptDataView修改时间：2026-06-13 09:12:16