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 

posted @ 2015-08-27 19:30  哥德  阅读(31203)  评论(2)  编辑  收藏  举报