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对象的哪个字节开始的