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

负数二进制转换

原来如此，把500的16位分红两个8位就是1和-12。可是为何-12在前面的呢？

这就要提到字节序这个东西了，详细内容点击连接看百科，这里简单说一下就是：500这个数字CPU-A认为我应该存为500，CPU-B认为我应该存005，他们各有各的理由，不巧的是我的计算机就是将数字倒着存的，因此放在第三和第四字节里面的东西分别是 11110100   00000001

 经过实验(在chrome44里)，我总结了以下几种状况会获得的结果：

1. 若是在A类型中设置了超过A类型范围的值，则将该值二进制后，取得对应范围类型的结果做为最终值；
2. 设置某个字节的值为String字符串，则该值为0；
3. 设置字节的值为boolean值，则true为1，false为0；
4. 若是在整型中设置了浮点型，则将浮点型取整(没有四舍五入)后二进制转化再取对应范围的值；

其中第一点和第四点在设置最终值的时候都跟字节序有关，而为了解决这个问题javascript引入了能够设置字节序的新类型DataView，详细状况后面再说。

视图的方法与属性

var arraybuffer = new ArrayBuffer(8);

var view = new Int8Array(arraybuffer);


view.buffer           //return  arraybuffer      readonly

view.byteLength       //return   8               readonly

view.byteOffset       //return   0               readonly       

view.length           //return   0               readonly

view.entries()         //return Array Iterator object  包含键值对

view.keys()            //return Array Iterator object  只包含键

view.set([1,2,3],3)   //return [0,0,0,1,2,3,0,0]

view.subarray(1,4)   //return  [0,0,1] 根据上面set后的值 从位置1开始到4但不包括第4位      

 如上：前四个属性都是只读的：

　　buffer　　　　  返回ArrayBuffer的引用

　　byteLength　　返回字节长度

　　byteOffset　 　返回视图在该ArrayBuffer中占用内存区域的起点位置

　　length　　　　 返回视图数据的个数

　　set()　　　　   第一个参数为已有的视图或者数组，第二个参数表明从第几个字节开始设置值

　　subarray　　   返回一个新的视图，若是第二个参数省略，则取剩余的所有

entries和keys两个方法目前仅在chrome和FireFox上面支持，返回一个数组迭代对象，你能够经过该对象的next()方法依次取得相应的值，或者使用for...of循环进行迭代。

在写这篇随便的时候，我查看了 Mozilla开发者网络 实际上这几种视图类型的原型TypedArray还有不少方法，诸如join、indexOf、forEach、map等，但惋惜其余浏览器并不支持，或许未来会有所改善。

 DataView视图

为了解决各类硬件设备、数据传输等对默认字节序的设定不一而致使解码时候会发生的混乱问题，javascript提供了DataView类型的视图来让开发者在对内存进行读写时手动设定字节序的类型。

（一）DataView构造函数

//new DataView(arraybuffer,byteOffset [, byteLength])

var arraybuffer = new ArrayBuffer(8);

var dv1 = new DataView(arraybuffer);    //0-7

var dv2 = new DataView(arraybuffer,2);    //2-7

var dv3 = new DataView(arraybuffer,3,2);    //3-4

（二）DataView实例化后的对象所具备的功能

Read	Write
getInt8()	setInt8()
getUint8()	setUint8()
getInt16()	setInt16()
getUint16()	setUint16()
getInt32()	setInt32()
getUint32()	setUint32()
getFloat32()	setFloat32()
getFloat64()	setFloat64()

 

 

 

 

 

 

 

 

 

以上这些方法均遵循以下的语法

//读取数据
var num  =  dataview.getUint32(byteOffset [, littleEndian]);

//写入数据
dataview.setUint32(byteOffset,value [, littleEndian]);

//参数
//byteOffset   表示从内存的哪一个字节开始
//value           该对应字节将被设置的值
//littleEndian  字节序，true为小端字节序，false或者不填为大端字节序

值得注意的是，在DataView视图中，读写超出其实例化时的范围的值时，都会发生错误，这跟以前的固定类型的视图不同，在使用时更加谨慎。

你能够经过以下的方式来判断运行当前javascript的机器使用哪种字节序

var littleEndian = (function() {
  var buffer = new ArrayBuffer(2);
  new DataView(buffer).setInt16(0, 256, true);
  return new Int16Array(buffer)[0] === 256;
})();
console.log(littleEndian); // true ---->littleEndian 
                           //false ---->BigEndian

ArrayBuffer与字符串

javascript的字符串使用UTF-16编码的方式，因此咱们能够这样来作：

function Uint162Str(arraybuffer){
    return String.fromCharCode.apply(null,new Uint16Array(arraybuffer));
}

function Str2Uint16(str){
    //假设字符串”abc“ length=3,使用16位，则每个字母占据2字节，总字节为length乘以2
    var arraybuffer =new ArrayBuffer(str.length*2);
    var view = new Uint16Array(arraybuffer);
    for(var i=0,l=str.length;i<l;i++){
        view[i] = str.charCodeAt(i);
    }
    return view;
}    

在实际开发中，咱们可能会遇到从服务器端拿来的二进制数据的字符串使用的是UTF-8编码的，这时咱们就须要先将UTF-8的二进制编码还原成为unicode对应的二进制，目前在有意义的unicode范围内，已经能够恰好用两个字节来容纳这个二进制值了，至关于UTF-8三个字节来表示的字符，固然也包括了咱们最关心的中文字符。然而关于unicode的那些事也比较繁琐，就不在此讨论了，你能够参考这个：Decode UTF-8 with Javascript

---

参考连接

TypedArray(MDN)

Javascript TypedArray 解惑：Uint8Array 与 Uint8ClampedArray 的区别

后记：

　　虽然两三年前别人就写过这个东西了，可是我仍是写了一遍，之前写了两篇就放弃了，由于看到不少大神的文章，以为本身实在太菜，连写的资格都没有。这一年半的时间都在看别人的，现在才恍然，我不过是要记录本身的编程之路，经过写做才能对问题研究得相对透彻，又不是要出教程，勇敢的告诉你们，鄙人才疏学浅，请各位看官多多指正！o(∩_∩)o