ArrayBuffer详细介绍

ArrayBuffer

ArrayBuffer 对象用来表示通用的原始二进制数据缓冲区。

它是一个字节数组，通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 中的内容；而是要通过类型化数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

相比于普通的 JavaScript 数组，ArrayBuffer 对象不会自动改变大小，这使得它更适合处理二进制数据，例如图像、音频、视频以及网络通信中的数据传输等

ArrayBuffer() 构造函数创建一个以字节为单位的给定长度的新 ArrayBuffer。你也可以从现有的数据（例如，从 Base64 字符串或者从本地文件）获取数组缓冲区。

ArrayBuffer 是一个可转移对象。

创建 ArrayBuffer

要创建一个新的 ArrayBuffer 实例，需要使用 ArrayBuffer 构造函数，并传入一个表示字节长度的整数值作为参数。例如，创建一个长度为 8 字节的 ArrayBuffer：

const buffer = new ArrayBuffer(8);

操作 ArrayBuffer

一旦创建了 ArrayBuffer，我们可以使用 DataView 或 TypedArray 来读取和写入其中的数据。

使用 DataView

DataView 对象提供了一种灵活的方式来读取和写入 ArrayBuffer 中的数据。可以使用 DataView 的方法来指定偏移量和数据类型，以读取或写入特定位置的数据。

下面是一个使用 DataView 进行读写操作的示例：

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

// 写入数据
view.setInt8(0, 42); // 在索引 0 处写入一个 8 位带符号整数

// 读取数据
const value = view.getInt8(0); // 从索引 0 处读取一个 8 位带符号整数
console.log(value); // 输出: 42

使用 TypedArray

TypedArray 是一组特定类型的数组对象，它们被用来操作 ArrayBuffer 中的数据。不同的 TypedArray 对象对应于不同的数据类型，例如 Int8Array、Uint8Array、Int16Array、Float32Array 等等。

下面是一个使用 TypedArray 进行读写操作的示例：

const buffer = new ArrayBuffer(8);
const array = new Int8Array(buffer);

// 写入数据
array[0] = 42; // 在索引 0 处写入一个 8 位带符号整数

// 读取数据
const value = array[0]; // 从索引 0 处读取一个 8 位带符号整数
console.log(value); // 输出: 42

示例案例：计算数组平均值

下面是一个使用 ArrayBuffer 和 TypedArray 计算数组平均值的具体案例：首先创建一个包含 100 个随机数的数组，然后创建一个与数组长度相同的 ArrayBuffer，并使用 Float64Array 将数组数据拷贝到 ArrayBuffer 中。最后，使用 TypedArray 对象计算数组平均值并输出结果。

// 创建一个包含 100 个随机数的数组
const array = new Array(100).fill(0).map(() => Math.random() * 100);

// 创建一个与数组长度相同的 ArrayBuffer
const buffer = new ArrayBuffer(array.length * Float64Array.BYTES_PER_ELEMENT);

// 使用 Float64Array 将数组数据拷贝到 ArrayBuffer
const view = new Float64Array(buffer);
for (let i = 0; i < array.length; i++) {
  view[i] = array[i];
}

// 使用 TypedArray 计算平均值
const sum = view.reduce((acc, val) => acc + val, 0);
const average = sum / array.length;

console.log(average);

通过上述介绍和案例，我们可以看到 ArrayBuffer 在处理二进制数据时的高效性和灵活性。它为 JavaScript 开发者提供了更多处理原始二进制数据的能力，使得处理图像、音频、视频等应用场景更加便捷。