# ArrayBuffer 和 Unit8Array 区别
# 类型化数组
常见的数组如下:
const arr = new Array(1)
1
在处理二进制数据的场景下,比如 WebSocket 存在局限。所以 H5 版本,TypedArray 在 WebGl 规范中被引入,其操作如同普通数组,只是其元素是特定的值。
类型化数组的核心是 ArrayBuffer 的类型。用来指定在内存中占用多少字节。
创建一个 6 比特的二进制缓冲区
const buffer = new ArrayBuffer(6)
1
2
2
ArrayBuffer 对象并没有提供任何读写内存的方法,使用 ArrayBuffer(数组缓冲器类型)的一种特别的方式就是用它来创建数组缓冲器视图。最常见的视图是 DataView,通过它可以选择 ArrayBuffer 中的一小段字节。
DataView 的类型如下:
- Int8Array: 8位有符号整数,长度1个字节(-128~127)
- Uint8Array: 8位无符号整数,长度1个字节(0~255)
- Int16Array: 16位有符号整数,长度2个字节(-32768,32767)
- Uint16Array: 16位无符号整数,长度2个字节(0~65535)
- Int32Array: 32位有符号整数,长度4个字节(-2147483648~2147483647)
- Uint32Array: 32位无符号整数,长度4个字节(0~4294967295)
- Float32Array: 32位浮点数,长度4个字节
- Float64Array: 64位浮点数,长度8个字节
类型化视图一般也被称为类型化数组,因为它们除了元素必须是某种特定的数据类型外,与常规的数组无异。而且它们都继承了 DataView。
ArrayBuffer 可以通过 isView 方法区分是否是类型化视图:
// 创建一个 8 位无符号整数视图
const arr = new Uint8Array(6)
ArrayBuffer.isView(arr) // true
1
2
3
4
2
3
4
区别如下:
| --- | ArrayBuffer | Uint8Array 数组 |
|---|---|---|
| 存储内容 | 0、1 组成的二进制数据 | 数字、字符串、布尔值以及对象和数组等 |
| 存储位置 | 栈(所以取数据较快) | 堆 |
| 存储大小 | 初始化后固定大小 | 数组则可以自由增减 |
# 相互转换:
- ArrayBuffer --> Uint8Array 数组
const buffer = new ArrayBuffer()
const arr = new Uint8Array(buffer)
1
2
3
2
3
- Uint8Array --> ArrayBuffer 数组
const arr = new Uint8Array(buffer)
const buffer = arr.buffer
1
2
3
2
3