JavaScript操作二进制数据的接口分别为 ArrayBuffer对象、TypeArray视图、DataView视图，ES6将它们纳入ECMAScript规格，它们都是以数组的语法处理二进制数据，所以统称为二进制数组。
JS下的二进制数组很像C语言的数组，允许开发者以数组下标的形式，直接操作内存。
二进制数组由三类对象组成：
- ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过'视图'进行操作。"视图"部署了数组接口，这意味着，可以用数组的方法操作内存。
- TypedArray视图：一共包括9中类型的视图，比如Uint8Array Int16Array数组视图，Float32Array数组视图
- DataView视图：可以自定义复合格式的视图，比如第一个字节是uint8、第二 第三字节是Int16、第四五六七字节开始是Float32等等，此外还可以自定义字节。
总结来说ArrayBuffer对象表示原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView用来表示复杂类型的二进制数据。
TypedArray视图支持的数据类型一共有9种
| 数据类型 | 字节长度 | 含义 | 对应的C语言类型 |
|---|---|---|---|
| Int8 | 1 | 8位带符号整数 | Signed char |
| Uint8 | 1 | 8位不带符号整数 | Unsigned char |
| Int16 | 2 | 16位 | short |
| Uint16 | 2 | unsigned short | |
| Int32 | 4 | 32位 | int |
| Uint32 | 4 | 32位 | Unsigned int |
| Float32 | 4 | 32位浮点数 | float |
| Float64 | 8 | 64位浮点数 | double |
二进制数组并不是真正的数组，而是类型数组的对象
1. ArrayBuffer对象
ArrayBuffer对象代表存储二进制数据的一段内存，它并不能直接读写，智能通过视图（TypedArray视图和DataView视图）来读写，所谓的视图就是以指定格式解读二进制数据。
const buf = new ArrayBuffer(32);
// 默认所有的字节的值都是0
为了读写这段内容，需要为它指定视图，DataView视图的创建，需要提供ArrayBuffer对象实例作为参数
const buf = new ArrayBuffer(32);
const dataview = new DataView(buf);
dataview.getUint(0); // 0
也可以使用typeArray视图，与DataView不同之处在于，它不是一个构造函数 而是一群构造函数，代表不同的数据格式
const buffer = new ArrayBuffer(32)
const x1 = new Int32Array(buffer);
const x2 = new Uint8Array(buffer);
上述代码对同一段内存，分别建立两种视图：32位带符号整数和8位不带符号整数。因为底层是同一段内存，所有不同的视图对象操作这一段内存，会相互影响
-
ArrayBuffer.prototype.byteLength: ArrayBuffer实例的byteLength属性，返回所分配的内存区域的字节长度
-
ArrayBuffer.prototype.slice(): 实例有一个slice方法，允许讲内存区域的一部分，拷贝生成一个新的ArrayBuffer对象
const buffer = new ArrayBuffer(8); const newBuffer = buffer.slice(0,3);// 返回一个新的ArrayBuffer对象 -
ArrayBuffer.isView() 静态方法 返回一个boolean 表示参数是否位ArrayBuffer的视图实例
TypedArray 视图
ArrayBuffer对象作为内存区域，可以存放多种类型的数据。 同一段内存，不同数据有不同的解读方式，这就叫做『视图（View）』
TypedArray一共有9种类型，每一种视图都是一种构造函数。
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
基本可以按照数组来处理所有的数据，但是还是略微差异：
- TypedArray数组的所有成员，都是同一类型
- TypedArray数组的成员是连续的，不会有空位
- TypedArray数组成员的默认值为0，new Array(10) 里面没有任何成员，只有10个空位，new Uint8Array(10)返回有个TypedArray数组，里面10个成员都是0
- TypedArray数组只有一层视图，本身不存储数据，它的数据都存储在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性。
构造函数：
TypedArray(buffer, byteOffset = 0, length?)
同一个ArrayBuffer对象之上，可以根据不同的数据类型，建立多个视图
数组方法
- TypedArray.prototype.copyWithin(target, start, end)
- TypedArray.prototype.entries()
- TypedArray.prototype.every(callbackfn , thisArg?)
- TypedArray.prototype.fill(value, start = 0, end= this.length)
- TypedArray.prototype.filter(callbackfn, thisargs?)
- TypedArray.prototype.find(predicate, thisargs?)
- TypedArray.prototype.findIndex(predicate, thisargs)
- TypedArray.prototype.forEach(callbackfn, thisArgs)
- TypedArray.prototype.indexOf(searchElement, fromIndex)
- TypedArray.prototype.join(separator )
- TypedArray.prototype.keys()
- TypedArray.prototype.lastIndexOf(searchElement, fromIndex?)
- TypedArray.prototype.map(callbackFn, thisArgs?)
- TypedArray.prototype.reduce(callbackfn, initialValue?)
- TypedArray.prototype.reverse()
- TypedArray.prototype.slice(start = 0. End = this.length)
- TypedArray.prototype.some(callbackfn,thisArg?)
- TypedArray.prototype.sort(comparefn)
- TypedArray.prototype.toString()
- TypedArray.prototype.values()
字节序
字节序指的是数值在内存中的表示方式
-
小端字节序
x86体系的计算机都采用小端字节序，相对重要的字节排在后面的内存地址，相对不重要字节排在前面的内存地址。
-
大端字节序
很多网络设备和特定的操作系统采用的是大端字节序
问题出现在所有的TypedArray数组内部采用小端字节读取数据，如果一段数据是大端字节序，typedArray数组将无法正确解析，此时只能采用DataView对象，设定字节序。
DataView视图
DataView视图提供更多操作选项，而且支持设置字节序，本来，在设计目的上，ArrayBuffer对象的各种TypedArray视图，是用来向网卡、声卡之列的本机设备传输数据、所以使用本机的字节序就可以了；而DataView视图的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。
DataView(ArrayBuffer buffer[字节起始位置[，长度]])
DataView实例有以下属性，含义与TypedArray实例的同名方法相同
- DataView.prototype.buffer: 返回对应的ArrayBuffer对象
- DataView.prototype.byteLength: 返回占据的内存字节长度
- DataView.prototype.byteOffset: 返回当前视图从对应的ArrayBuffer对象的哪个字节开始的
网友评论