JS-ArrayBuffer (二)

上节对ArrayBuffer有了基本的了解，不过没提及如果读取和修改buffer里面的数据，这节主要来说说能够修改buffer的视图类

常用视图类型TypeArray：

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

 

 

 

 

 

 

 

 

.

单个试图类占用字节数：可以使用试图类的静态属性可以获取：bytesLen = Int8Array.BYTES_PER_ELEMENT

所以一个试图类对象占用字节数为：bytes = 长度 * bytesLen;

TypeArray构造函数：

1.传入一个长度length

//传入长度，创建后默认 0000 0000 | 0000 0000
var int8a = new Int8Array(2);
//0 0 
console.log(int8a[0], int8a[1]);

2.传入一个buffer

//0000 0000 | 0000 0000
var buffer = new ArrayBuffer(2);

//如果传入buffer的长度不是2的倍数，则会报错
var int16a = new Int16Array(buffer);
var int8a = new Int8Array(buffer);

//0000 0000 | 0000 0001
int16a[0] = 1;
//越界处理不会报错 //0000 0000 | 0000 0001 || 0000 0000| 0000 0002
int16a[1] = 2;
console.log(int16a[1]);


// log 1 由于字节序为小端，所以int8a[0] 为1
console.log(int8a[0]);
//log 0
console.log(int8a[1]);

3.传入buffer, start,length

var buffer = new ArrayBuffer(32);

//1*2 = 2字节：0-1
var int8a = new Int8Array(buffer, 0, 2);

//2*3 = 6字节：2-7
var int16a = new Int16Array(buffer, 2, 3);

//4*4=16字节：8-23
var int32a = new Int32Array(buffer, 8, 4);

//此处会报错
var int32a2 = new Int32Array(buffer, 30, 3);

4.传入一个object

var int8a = new Int8Array([1, 2, 3, 4, 5]);

console.log(int8a[0]);

如果两个视图对象同时处理同一个buffer,而且处理的buffer的相同字节，则改字节数据储存的是，最后修改为的数据

如下面例子：

//创建了一个8字节的buffer
var buffer = new ArrayBuffer(8);

var int8a = new Int8Array(buffer, 0, 4);
var int16a = new Int16Array(buffer, 2, 1);

int8a[2] = 83;
int8a[3] = 84;

console.log(int8a[2]);  // 83
console.log(int8a[3]);  // 84

//和int8a修改了buffer的第3，4个字节
int16a[0] = 256;

console.log(int16a[0]); // 256 
console.log(int8a[2]);  // 0
console.log(int8a[3]);  // 1


//分析：int16把第3，4个字节修改为了 0001 0000
//但是为什么int8a[2] == 0 而 int8a[3] == 1呢
//这是因为我使用的机器是小端字节序，当它修改int16时按照小端来写入 0000 0001

字节序在另外的文章有提及，这里顺便提一下，数据的存储内容是不知道什么是大小端的，你存什么它就是什么（比如上面的256为小端0000 0001，还是大端0001 0000）,只有存的时候，或者取的时候才有字节序的说法，用大端的方法存，就大端的方法取，那么取出来的数据就是对的，反则会造成数据出错

视图的常用方法和属性：

var buffer = new ArrayBuffer(8);

var view = new Int8Array(buffer);

view.buffer        //传入buffer的引用
view.byteLength    //占用字节的数量
view.byteOffset    //在buffer中的偏移位
view.length
view.set([1,2,3], 3);//改写数据为[0,0,0,1,2,3,0,0];
view.subarray(1,4);