技巧|03 JavaScript 中将ArrayBuffer 转换为字符串

type

status

date

slug

summary

01 实际问题 - 网页乱码

nodejs 使用 axios 写爬虫时 Response 乱码，经查查发现网页编码是 gb2312的。则我们可以通过返回 arraybuffer 的方式，再重新编码即可。

02 技术细节 - ArrayBuffer、Int32Array等

ArrayBuffer 是一种用于在 JavaScript 中存储二进制数据的对象，可以看做是一个固定大小的字节缓冲区。可以使用 ArrayBuffer 来存储任意类型的二进制数据，包括数字、图像、音频等等。

Int32Array 是一种类型化数组（TypedArray），它只能存储 32 位整数类型的数据。具体来说，Int32Array 可以存储范围在 -2147483648 ~ 2147483647 之间的整数数据，也就是 JavaScript 中的 32 位有符号整数类型。

Int32Array 中每一项都占用 4 个字节，使用 Int32Array 对象可以快速地读取和写入 ArrayBuffer 中的 32 位整数数据，适合处理大量数据的场景。

除了 Int32Array，还有一些其他的类型化数组也可以用于存储不同类型的数据，包括：

Int8Array：1 个字节的有符号整数类型，范围在 -128 ~ 127 之间；

Uint8Array：1 个字节的无符号整数类型，范围在 0 ~ 255 之间；

Uint16Array：2 个字节的无符号整数类型，范围在 0 ~ 65535 之间；

Int16Array：2 个字节的有符号整数类型，范围在 -32768 ~ 32767 之间；

Uint32Array：4 个字节的无符号整数类型，范围在 0 ~ 4294967295 之间；

Float32Array：4 个字节的单精度浮点数类型；

Float64Array：8 个字节的双精度浮点数类型。

以上这些类型化数组都只能存储指定类型的数据，并且每一项占用的字节数都是固定的。使用类型化数组可以轻松地读取和写入 ArrayBuffer 中指定类型的数据，提高数据读写的效率。

03 技术举例

Uint8Array 和 Uint32Array 都是类型化数组（TypedArray），但它们的应用场景和使用方式有所不同。

Uint8Array 适用于存储任意的 8 位无符号整数类型的数据，每一项占用一个字节。可以通过数组下标的方式直接访问和修改其中的数据。

以下是 Uint8Array 的一个例子，使用它来将一个字符串编码成 UTF-8 的字节数组：

在上面的代码中，我们通过 new Uint8Array(buffer) 创建了一个长度为 codePoints.length * 4 的 Uint8Array 对象 uint8Array，即总共分配了足够存储 UTF-8 字节数组的缓存空间。然后通过对字符的 Unicode 编码进行判断，将每个字符转换为对应的 UTF-8 字节序列，并存储到 uint8Array 中。最后通过 uint8Array.subarray(0, offset) 返回仅包含有效数据的 Uint8Array 视图对象。

Uint32Array 适用于存储任意的 32 位无符号整数类型的数据，每一项占用 4 个字节。可以通过数组下标的方式直接访问和修改其中的数据。

好的，以下是一个使用 Uint32Array 在 JavaScript 中实现求素数的例子：

上面的代码演示了如何使用 Uint32Array 在 JavaScript 中实现求小于等于 n 的所有素数的过程。我们创建一个长度为 n+1 的 Uint32Array 缓冲区 primes，它的每个元素都初始化为 1，表示初始时假设所有数都是素数。

然后从 2 开始，我们遍历到 n 的平方根，如果某个数 i 是素数，就将大于 i 的 i 的倍数都标记为非素数（将 primes[j] 置为 0），最终就能够得到所有小于等于 n 的素数。

使用 Uint32Array 能够支持处理更大的整数，也能够减少内存空间的使用，提高代码执行效率。这个例子说明了 Uint32Array 可以应用于数论问题中，并且通过使用 JavaScript 的更高级语言功能可以加速计算。