类型化数组

由于以前前端对文件以及二进制数据操作很少, 因此大多数时候很难接触到对二进制数据的操作, 仅仅通过 input 标签进行文件的选择并上传至服务器, 其他大部分时候包括获取文件的 md5 等操作都由具体的库实现. 但假设我们要实现音频和视频文件的编辑时, 我们应如何去操作文件呢? 这就引入了类型化数组.

类型化数组具备很多普通数组一样的操作方式, 但是类型化数组不能修改长度, 每个元素都只能是数值, 数值的大小取决于使用的是何种类型化数组.

类型化数组大概有如下种类:

类型	描述
Int8Array	8 位有符号整数(补码)
Uint8Array	8 位无符号整数
Int16Array	16 位有符号整数(补码)
Uint16Array	16 位无符号整数
Int32Array	32 有无符号整数(补码)
Uint32Array	32 位无符号整数
Float64Array	64 位 IEEE 浮点数（16 位有效数字，例如 1.123...15）
BigInt64Array	64 位有符号整数（补码）
BigUint64Array	64 位无符号整数

相信也能看出来了, 类型数组的命名方式和很多强类型语言的数值类型命名方式类似, 大多数情况下我们使用Uint8Array的情况更多, 因为其粒度更细, 限制最少, 作用最广.

ArrayBuffer

ArrayBuffer是一个很抽象的描述, 你可以将他倾向表达为一块可以操作的内存区域, 只不过他本身无法直接操作而是通过类型化数组或则DataView去操作.

通俗点来讲: ArrayBuffer是画布, 类型化数组是画笔.

DataView

数据视图是一种更加底层的接口, 它最大的作用就是控制字节序(字节顺序指定一段连续字节的数据的放置方式).

使用方式

类型化数组通过new TypedArray(ArrayBuffer)的方式使用.

一个结合ArrayBuffer的示例:

// 声明一个12字节的数据缓冲区
const buf = new ArrayBuffer(12)

// 定义一个类型化数组
const tArray = new Uint8Array(buf)

// 和数组一样的赋值方式, 不过赋值的大小需要根据具体的类型来, Uint8Array的赋值范围是0-255
tArray[0] = 255
// 其他赋值方式
tArray.set([1,2,3], 1) // 等价于tArray[1] = 1, tArray[2] = 2, tArray[3] = 3

类型化数组 ​

ArrayBuffer ​

DataView ​

使用方式 ​

类型化数组

ArrayBuffer

DataView

使用方式