ArrayBuffer与TypedArray二进制操作全解析

在JavaScript中，`ArrayBuffer`、`TypedArray`和`DataView`是处理二进制数据的核心。`ArrayBuffer`作为二进制数据的容器，提供固定长度的内存区域，但不能直接读写。`TypedArray`则基于`ArrayBuffer`，提供各种数据格式（如Int8Array, Uint32Array, Float64Array）的高效读写能力，常用于文件读取、WebSocket通信和Canvas像素处理。`DataView`则提供更灵活的字节序控制，允许在任意偏移位置读写不同类型的值，特别适合处理网络协议或跨平台数据交换。本文将深入详解这三者的用法与特性，助你掌握JavaScript二进制数据处理的关键技术。

JavaScript通过ArrayBuffer提供二进制数据存储，TypedArray实现高效读写，DataView支持灵活的字节序控制，三者结合可处理文件、网络通信等场景中的二进制数据。

在JavaScript中处理二进制数据主要依赖 ArrayBuffer 和 TypedArray。它们为操作原始二进制数据提供了底层支持，常用于文件读取（如图片、音频）、WebSocket通信、Canvas像素处理等场景。

ArrayBuffer：二进制数据的容器

ArrayBuffer 是一段固定长度的连续内存区域，用来存储二进制数据。它本身不能直接读写，必须通过 视图（View） 来操作，最常见的视图就是 TypedArray。

创建一个 ArrayBuffer 示例：

let buffer = new ArrayBuffer(8); // 创建 8 字节的缓冲区

此时 buffer 就是一块空的二进制空间，无法直接访问内容。

TypedArray：访问和操作二进制数据的视图

TypedArray 是一组基于 ArrayBuffer 的数组类型，提供不同数据格式的读写能力。常见的有：

• Int8Array：8位整数
• Uint8Array：无符号8位整数
• Int16Array：16位整数
• Uint32Array：32位无符号整数
• Float32Array：32位浮点数
• Float64Array：64位浮点数

使用 TypedArray 操作数据示例：

let buffer = new ArrayBuffer(8);
let view = new Uint8Array(buffer); // 使用 Uint8Array 视图
view[0] = 42; // 写入一个字节
view[1] = 255;

现在 buffer 中前两个字节分别是 42 和 255。

多个视图共享同一块内存

同一个 ArrayBuffer 可以被多种 TypedArray 视图访问，这在处理复杂数据结构时非常有用。

例如，用 Float32Array 写入浮点数，再用 Uint8Array 查看其二进制表示：

let buffer = new ArrayBuffer(4);
let floatView = new Float32Array(buffer);
let byteView = new Uint8Array(buffer);

floatView[0] = 1.5;
console.log(byteView); // 输出 [0, 0, 192, 63] —— 1.5 的 IEEE 754 编码

这种能力常用于序列化、解析协议或调试二进制格式。

DataView：更灵活的二进制操作

如果需要精确控制字节序（大端或小端），可以使用 DataView。它比 TypedArray 更灵活，允许在任意偏移位置读写不同类型的值。

示例：

let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);

dataView.setUint32(0, 123456, true); // 小端模式写入 32 位整数
dataView.setFloat32(4, 3.14, false); // 大端模式写入浮点数

console.log(dataView.getUint32(0, true)); // 读取小端整数

DataView 特别适合处理网络协议或跨平台数据交换。

基本上就这些。ArrayBuffer 提供存储空间，TypedArray 提供高效访问，DataView 提供精细控制。掌握它们就能在 JavaScript 中自如处理二进制数据。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。