深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

在JavaScript中，我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时，单纯依赖字符串或数组就显得力不从心了。这时，ArrayBuffer便成为了一个不可或缺的工具。它像一把“瑞士军刀”，让我们能够直接操作底层的二进制数据。

本文将从概念、操作方式和实际应用三个维度，带你深入浅出地了解ArrayBuffer的魅力。

一、什么是ArrayBuffer？

ArrayBuffer 是 JavaScript 中用于表示原始二进制数据缓冲区的对象。它本质上是一块固定长度的连续内存区域，存储的是字节数据（byte），而不是具体的数值或字符串。你可以把它想象成一块“画布”，而这块画布上可以绘制不同类型的数据（如整数、浮点数、字符串等）。

核心特点：

1. 固定长度：创建后长度不可变，若需调整大小，必须重新分配内存并复制数据。
2. 原始二进制数据：存储的是字节（0~255），没有类型信息。
3. 不可直接操作：需要通过 TypedArray 或 DataView 来访问和修改数据。

二、如何创建ArrayBuffer？

创建ArrayBuffer非常简单，只需指定字节数即可：

const buffer = new ArrayBuffer(16); // 创建一个16字节的缓冲区
console.log(buffer.byteLength); // 输出: 16

此时，buffer是一个空的字节容器，存储了16个字节的数据（每个字节为8位）。虽然它已经存在，但我们还不能直接读写其中的内容，必须通过视图（TypedArray或DataView）来操作。

三、操作ArrayBuffer的两种方式

1. TypedArray：类型化数组

TypedArray是操作ArrayBuffer的“标准工具”，它允许我们以特定的数据类型（如整数、浮点数）来读取和写入数据。常见的TypedArray类型包括：

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

示例：使用TypedArray操作ArrayBuffer

// 创建一个8字节的ArrayBuffer
const buffer = new ArrayBuffer(8);

// 创建一个Uint8Array视图（8位无符号整数）
const uint8Array = new Uint8Array(buffer);

// 写入数据
uint8Array[0] = 10;
uint8Array[1] = 20