【转】JavaScript ArrayBuffer浅析

时隔一年半，再次来到博客园。回首刚接触前端时所写的两篇随笔，无法直视啊~

----------------------------------------------------------------------------♠

 

简介：

　 ArrayBuffer又称类型化数组。

　　javascript数组（Array）长什么样子，相信大家都清楚，那么我说说差别应该就可以了解这究竟是个什么了！

1. 数组里面可以放数字、字符串、布尔值以及对象和数组等，ArrayBuffer放0和1组成的二进制数据
2. 数组放在堆中，ArrayBuffer则把数据放在栈中（所以取数据时后者快）
3. ArrayBuffer初始化后固定大小，数组则可以自由增减。(准确的说，视图才应该跟数组来比较这个特点)

构造函数：　　

// new ArrayBuffer(Bytelength);
var arraybuffer = new ArrayBuffer(8);

//类方法ArrayBuffer.isView() 判断某对象是否为 视图(这是什么？往下看)
var int8a = new Int8Array(arraybuffer);
ArrayBuffer.isView(int8a)  //return true

//类属性ArrayBuffer.length 默认值1，暂未发现用处
ArrayBuffer.length //return 1

//返回的对象具有byteLength属性 值为参数Bytelength
arraybuffer.byteLength //return 8

如上所诉：实例化一个对象的时候，仅需要传入一个参数，即字节数。

字节(Byte)：存储空间的基本计量单位。一个字节等于8位(bit)，每一位用0或1表示。

如下为两个字节(16个格子)：

1

0

1

1

0

0

0

1

0

1

0

0

1

0

1

0

 

 视图：

　　ArrayBuffer对象并没有提供任何读写内存的方法，而是允许在其上方建立“视图”，从而插入与读取内存中的数据。如上：我们在内存中分配了16个格子也就是两个字节，如果我们要划分出A视图与B视图来瓜分这16个格子的话，代码是这样的：

var arraybuffer = new ArrayBuffer(8);

var aView = new Int8Array(arraybuffer,0,1);
var bView = new Int8Array(arraybuffer,1,1);

aView[0] = 1;  //二进制00000001
bView[0] = 2;  //二进制00000010

格子变成这样了：

0

0

0

0

0

0

0

1

0

0

0

0

0

0

1

0

 

前8位表示数字1，后8位表示数字2

视图类型

视图类型	数据类型	占用位数	占用字节	有无符号
Int8Array	整数	8	1	有
Uint8Array	整数	8	1	无
Uint8ClampedArray	整数	8	1	无
Int16Array	整数	16	2	有
Uint16Array	整数	16	2	无
Int32Array	整数	32	4	有
Uint32Array	整数	32	4	无
Float32Array	浮点数	32	4	\
Float64Array	浮点数	64	8	\

 

 

 

 

 

 

 

 

 

 

纳尼？连最常用的字符串都没有？悄悄告诉你，字符串本身也就用二进制保存的，后面细说。

占用位数就相当于占用了多少“格子”，等同于占用字节数，可以通过访问视图类型的静态属性：BYTES_PER_ELEMENT来获取这个值，如：

Int8Array.BYTES_PER_ELEMENT          // 1
Uint16Array.BYTES_PER_ELEMENT        // 2
Int32Array.BYTES_PER_ELEMENT         // 4
Float32Array.BYTES_PER_ELEMENT       // 4
Float64Array.BYTES_PER_ELEMENT       // 8

 有无符号则表示该类数据类型是否包含负数，如：Int8Array代表8位有符号整数，其范围为 -128~127，而Uint8Array代表8位无符号整数，范围是 0~255。

视图构造函数

（一）

var view = new Int16Array([1,653,700,-90,88]);

如上：直接传入一定特定范围内的数组

（二）

var view = new Uint8Array(8);

view[0] = 10;
view[1] = 58;
view[2] = 156;
         .
         .
         .
view[7] = 255;

如上：传入一个数组长度值，占用的字节数 = 长度 X 该类型的BYTES_PER_ELEMENT

（三）

//new Int8Array(arraybuffer,start,length);

//参数
//arraybuffer为ArrayBuffer的实例     必填
//start表示从第几个字节开始            可选（默认从0开始）
//length表示数据个数                  可选（默认到分配的内存末尾）

var arraybuffer = new ArrayBuffer(32);

var aView = new Int16Array(arraybuffer,0,4);    //占用0-7

var bView = new Float32Array(arraybuffer,8,5);  //占用8-27

var cView = new Uint8Array(arraybuffer,28,8)    //仅剩4个,报错Invalid typed array length

如上：首先分配了32字节的空间，A视图使用Int16Array类型从0开始4个数据，每个数据占2个字节，所以A视图一共占用了8(0-7)个字节，后面的以此类推，最后留给C视图的空间仅有4字节，然而传入的length为8，所以就超出了所分配内存的范围而报错。

万一在分配视图空间的时候，两个试图空间重叠了会发生什么呢？举个例子：

var arraybuffer = new ArrayBuffer(4);

var aView = new Int8Array(arraybuffer);  //从0开始到内存末尾

var bView = new Int8Array(arraybuffer,2); //从2开始到末尾

aView[0] = 1;
aView[1] = 2;
aView[2] = 3;
aView[3] = 4;

bView[0] = 9;
bView[1] = 8;

console.log(aView[2] );      //return   9
console.log(aView[3] );      //return   8

两个相互重叠的视图所占据的内存空间，存在其中的值以最后一次写进去的为主。

假如我们写进去的数据类型不一样又会发生什么呢？↓

var arraybuffer = new ArrayBuffer(4);

var aView = new Int8Array(arraybuffer);  //从0开始到内存末尾

var bView = new Int16Array(arraybuffer,2); //从2开始到末尾

aView[0] = 1;
aView[1] = 2;
aView[2] = 3;
aView[3] = 4;

bView[0] = 500;
bView[1] = 8;

console.log(aView[2] );      //return   -12
console.log(aView[3] );      //return   1

我们的B视图从第二个字节开始，刚好能放一个16位的数据，然而我们在下面又写

bView[1] = 8;

并没有报错。说明在实例化视图时超出内存空间不允许，而对内存读写时超出则没有问题。不过bView[1]并没有值，返回undefined。

接下来我们看看为什么返回-12与1呢？

500的二进制值为(16位表示)：00000001 11110100

1的二进制值为(8位表示)：     00000001

-12的二进制值表示(8位表示)： 11110100

负数二进制转化法(展开)：

//先取负数的绝对值 

|-12| = 12

//12的二进制8位为：  

 00001100

//对上一部的二进制取反，即1换成0，0换成1

11110011

//最后补码，即对该值加 1

11110100