本文介绍了 JavaScript 中 ArrayBuffer 和 TypedArray 的应用。ArrayBuffer 用于预分配内存，存储二进制数据，但需通过 DataView 或 TypedArray 视图来读写。TypedArray 是定型数组，用于高效处理特定数据类型。DataView 则提供了更灵活的方式，适合在二进制文件处理、WebSocket 传输、WebGL 图形处理和音频处理等场景中使用。

JavaScript 中数组元素的数据类型是不固定的，number 类型可以是整数也可以是浮点数。这种性质与其它常见语言中的定型数组很不一样，导致不同语言编写的程序在交换数据的时候，需要花费很多时间在数据转换上。

ECMAScript 后来引入了定型数组 TypedArray。TypedArray并不是一个实际存在的数据类型，而是一系列定型数组类型的统称，它包含了 Int8Array、Uint8Array、Int16Array、Uint16Array、Float32Array等等。

这些定型数组只是一种“视图”，通过一种指定的方式解读内存中的二进制数据。

ArrayBuffer

在 JavaScript 中，可以通过 ArrayBuffer 预分配内存。

const buffer = new ArrayBuffer(16);// 分配 16 个字节

ArrayBuffer 在分配之后就不能再调整大小，可以通过 slice 方法切片出小 buffer。

ArrayBuffer 的粒度为字节 byte，不是比特 bit。

ArrayBuffer 不能直接读写，要通过视图读写。视图指的是 DataView 或者 TypedArray。

ArrayBuffer 存储的是二进制，只是一堆数据，但是数据表达了什么信息是未定义的。我们需要一种“解读方式”，按照一定的规定，才能解读出信息。不同的解读方式可以解读出不同的信息。这里的解读方式就是视图，也就是 DataView 或者 TypedArray。

如下图：

TypedArray

定型数组用于指定一种方式来读写一块buffer。

常见的类型有：

创建定型数组的时候，可以指定一个 ArrayBuffer 对象，那么定型数组实例会基于已存在的内存空间创建。

如果不指定已有的 ArrayBuffer 对象，则需要指定定型数组的长度，会自动在内存中分配内部数组缓冲区。

DataView

TypedArray是定型数组，在指定类型之后，就只能以固定大小的“窗口”来观察二进制读出一个数字来。

而 DataView 是一种更灵活的 buffer 视图，它可以通过指定偏移量和 elementType 在 buffer 中的任意位置读写一块数据。

它的特点有：

<li>必须指定 ArrayBuffer 实例才能创建 DataView 实例。
• 可以指定字节序。
• 读写操作超出边界时，会报错 RangeError。

应用场景

ArrayBuffer 的关键字是二进制、通信。

常见的应用场景如下：

<li>处理二进制文件: 读取、修改、生成二进制文件（如图像、音频、视频等）。
• WebSocket 数据传输: 传输二进制数据，如视频流、音频数据等。
• WebGL 与图形处理: 存储和传递图形数据到 GPU，处理顶点、颜色值等。
• 音频处理: 生成或修改音频数据，通过 Web Audio API 进行处理。