这个部分如果没有C语言和计算机基础会比较难理解,如果实在理解不了可以收藏它,日后再看。
二进制数组其实很早就有了,不过为了 WebGL 中,数据可以高效和显卡交换数据。分为3类:
- ArrayBuffer:代表内存中的一段二进制数据;
- TypedArray:读写简单的二进制数据,如 Uint8Array, Int16Array, Float32Array 等9类;
- DataView:读写复杂的二进制数据,如 Uint8, Int16, Float32 等8类;
数据类型 | 字节长度 | 含义 | 对应 C 语言类型 | TypedArray 类型 | DataView 类型 |
---|---|---|---|---|---|
Int8 | 1 | 8位有符号整数 | char | Int8Array | Int8 |
Uint8 | 1 | 8位无符号整数 | unsigned char | Uint8Array | Uint8 |
Uint8C | 1 | 8位无符号整数(自动过滤溢出) | unsigned char | Uint8ClampedArray | 不支持 |
Int16 | 2 | 16位有符号整数 | short | Int16Array | Int16 |
Uint16 | 2 | 16位无符号整数 | unsigned short | Uint16Array | Uint16 |
Int32 | 4 | 32位有符号整数 | int | Int32Array | Int32 |
Uint32 | 4 | 32位无符号整数 | unsigned int | Uint32Array | Uint32 |
Float32 | 4 | 32位浮点数 | float | Float32Array | Float32 |
Float64 | 8 | 64位浮点数 | double | Float64Array | Float64 |
ArrayBuffer 代表内存中的一段二进制数据,我们没法直接操作,需要利用视图(TypedArray,DataView)按一定格式解读二进制数据。但我们依然可以构造一段内存来存放二进制数据:
var buf = new ArrayBuffer(32); //分配32个字节的内存存放数据, 默认全0
var dataview = new DataView(buf); //将这段内存转为视图
dataview.getUint8(0); //得到第一个8字节的值(无符号),0
这里需要强调的是,分配内存空间不要太大!毕竟你的内存是有限的。
其次,无论使用什么视图,其实例化的内存如果共享,所有的写入操作会修改每一个视图,因为内存共用的:
“`js
var buf = new ArrayBuffer(32);
var view16 = new Int16Array(buf);
var viewu8 = new Uint8Array(buf);
console.log(viewu8[0]); //0
view16[0]=-1;
console.log(viewu8[0]); //255
``
1000 0000 0000 0001
这里之所以得到255,是因为内存共用导致的,但为何不是-1?Int16Array 是有符号类型的,这样二进制的最高位用作符号位,负数记为1:,之后的数字用移码存储,得到-1的二进制为:
1111 1111 1111 1111, 之后利用Uint8Array读取无符号的前8位,得到
1111 1111`这个计算为十进制为 28−1=255 2 8 − 1 = 255 。具体关于数制转换和反码补码这里不再展开,否则就跑偏了。
ArrayBuffer 对象也有几个方法和属性:
- byteLength: 得到内存区域的字节长度
const N = 32;
var buf = new ArrayBuffer(N);
if(buf.byteLength === N){
//分配成功
} else {
//分配失败
}
var buf = new ArrayBuffer(32);
var newBuf = buf.slice(0,3);
var buf1 = new ArrayBuffer(32);
var buf2 = new ArrayBuffer(32);
var buf1View = new Int8Array(buf1);
var buf2View = new Int8Array(buf2);
buf1.isView(buf1View); //true
buf1.isView(buf2View); //false
具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存;或接受一个数组参数,实例化该数组为二进制内容。得到的值是一个数组,可以直接使用[]
访问每个位置的内容,有length
属性。其构造函数有9个:
数据类型 | 字节长度 | 含义 | 对应 C 语言类型 | TypedArray 类型构造函数 |
---|---|---|---|---|
Int8 | 1 | 8位有符号整数 | char | Int8Array() |
Uint8 | 1 | 8位无符号整数 | unsigned char | Uint8Array() |
Uint8C | 1 | 8位无符号整数(自动过滤溢出) | unsigned char | Uint8ClampedArray() |
Int16 | 2 | 16位有符号整数 | short | Int16Array() |
Uint16 | 2 | 16位无符号整数 | unsigned short | Uint16Array() |
Int32 | 4 | 32位有符号整数 | int | Int32Array() |
Uint32 | 4 | 32位无符号整数 | unsigned int | Uint32Array() |
Float32 | 4 | 32位浮点数 | float | Float32Array() |
Float64 | 8 | 64位浮点数 | double | Float64Array() |
以上9个会对内存进行不同位数的格式化,以得到对应类型值的数组。这个数组不同于普通数组,它不支持稀疏数组,默认值为0,而且同一个数组只能存放同一个类型的变量。
以上每个构造函数都对应如下形式的参数:
(buffer, start=0, len=buffer.byteLength-start*8)
可以指定序列化其中 start到 end部分的二进制数据。注意这里指定的范围必须和数组类型所匹配,不能出现类似new Int32Array(buffer,2,2)
的情况。如果你觉得这个不符合你的需求,可以使用 DataView。
如果你觉得上面的写法复杂,可以不写 new ArrayBuffer,直接使用 TypedArray,但注意参数的意义不一样:
var f64a = new Float64Array(4); //分配32个字节,并作为double类型使用。 32 = 64 / 8 * 4
TypedArray的构造函数还接受另一个TypedArray作为参数,开辟新内存复制其值并改变类型,对原视图和buffer 不构成影响,也不共用内存。
TypeArray的构造函数还接受另一个Array作为参数,开辟新内存复制其值,对原数组不构成影响,也不共用内存。
当然利用一下方法,可以把 TypedArray 转换为普通数组:
var arr = [].slice.call(typedArray);
TypedArray具有除了concat()
以外的全部数组方法,当然,它也具有 iterator,可以用 for…of 遍历。
以下是 TypedArray 特有的属性和方法:
小技巧,转换字符串和 ArrayBuffer
//该方法仅限转换 utf-16 的字符串
function ab2str(buf){
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str){
var len = str.length;
var view = new Uint16Array(len);
for(let i = 0; i < len; i++){
view[i] = str.charCodeAt(i);
}
return view.buffer;
}
var str = "Hello world";
var buf = str2ab(str);
var view = new Uint16Array(buf);
for(var i = 0; i < view.length; i++){
console.log(String.fromCharCode(view[i])); //一次输出"Hello world"的每个字母
}
console.log(ab2str(buf)); //"Hello world"
这里扩展一些编码知识,我们知道计算机里面存储的是二进制,并且存储的最小单位是字节。但是不同的系统存储方式不同,分为高位优先和低位优先。比如 20170101 这个数字,其十六进制表示为 0x0133C575, 在低位优先的系统中存储方式为
0x75 0xC5 0x33 0x01
, 而在高位优先的系统中存储方式为0x01 0x33 0xC5 0x75
。由于大多数计算机采用低位优先的方式,所以 ES6 采用是也是低位优先的方式,但遇到高位优先的数据时,就不能简单的直接那来使用,具体使用会在 DataView 中介绍,这里说明一种判断低位优先(little endian)还是高位优先(big endian)的方法:
还有需要注意的是数据溢出,这个也是需要数制方面基础比较好理解,这里不过多展开了。举一个例子:
Uint8 只能表示8位无符号整数,最大是1111 1111
, 也就是十进制的 0~255;Int8因为有了符号位,只能表示十进制-128~127,如果给它的值不在这个范围内就会发生溢出,得到一个你意想不到但情理之中的值
var view1 = new Uint8Array(2);
view1[0] = 256; //256 二进制是 1 0000 0000 由于数据只能容纳8个值,进位1就丢了
view1[1] = -1; //之前说过-1 二进制(补码)为 1111 1111(全1), 作为无符号数8个1就是255
console.log(view1[0]); //0
console.log(view1[1]); //255
var view2 = new Int8Array(2);
view2[0] = 128; //由于符号位溢出,系统自动用32位计算这个数1 000 0000 0000 0000 0000 0000 1000 0000,取符号位和最后8位得到-128
view2[1] = -128; //由于符号位溢出,系统自动用32位计算这个数0 111 1111 1111 1111 1111 1111 0111 1111,取符号位和最后8位得到127
console.log(view2[0]); //-128
console.log(view2[1]); //127
为了防止这样的情况,js 有一个 Unit8ClampedArray, 使整数方向的溢出值为255,0方向的易楚志为0。注意这是个无符号的类型;
var view = new Uint8ClampedArray(2);
view[0] = 256;
view[1] = -1;
console.log(view[0]); //255
console.log(view[1]); //0
划分一块 buffer 使用得到 C 语言中的结构体
var buf = new ArrayBuffer(24);
var name = new Uint8Array(buf, 0, 16);
var gender = new Uint8Array(buf, 16, 1);
var age = new Uint16Array(buf, 18, 1);
var score = new Float32Array(buf,20,1);
相当于以下 C语言代码
struct Person{
char name[16];
char gender;
int age;
float score;
}
共用一块 buffer 使用得到 C 语言中的联合体
var buf = new ArrayBuffer(8);
var num = new Uint16Array(buf);
var dotNum = new Float64Array(buf);
相当于以下 C语言代码
union Example{
int num[4];
double dotNum;
}
具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存。毕竟当一段内存有多种数据时,复合视图也不是那么方便,这时适合使用 DataView 视图。其次 DataView 可以自定义高位优先和低位优先,这样可以读取的数据就更多了。
DataView构造函数形式如下,这一点和 TypedArray 一致:
(buffer, start=0, len=buffer.byteLength-start*8)
它具有以下方法格式化读取 buffer 中的信息:
它具有以下方法格式化写入 buffer 中的信息:
它具有以下属性和方法:
如果你不知道计算机使用的是高位优先还是低位优先,也可以自行判断:
//方法1
const BIG_ENDIAN = Symbol('BIG_ENDIAN');
const LITTLE_ENDIAN = Symbol('LITTLE_ENDIAN');
function getPlatformEndianness(){
let arr32 = Uint32Array.of(0x12345678);
let arr8 = new Uint8Array(arr32.buffer);
switch((arr8[0]*0x1000000)+(arr8[1]*0x10000)+(arr8[2]*0x100)+arr8[3]){
case 0x12345678: return BIG_ENDIAN;
case 0x78563412: return LITTLE_ENDIAN;
default: throw new Error("unknow Endianness");
}
}
//方法2
window.isLittleEndian = (function(){
var buffer = new ArrayBuffer(2);
new DataView(buffer).setInt16(0, 256, true);
return new Int16Array(buffer)[0] === 256;
}());