arraybuffer操作_ArrayBuffer 入门

这篇文章主要介绍了JavaScript中的ArrayBuffer详细介绍,本文讲解了Array 在内存中的堆栈模型、原始缓冲区的创建、数据化数组、DataView对象、XHR2 中的 ArrayBuffer等内容,

ArrayBuffer 对象

相对ArrayBuffer来说，可能Array会更熟悉些。

那么ArrayBuffer是什么鬼？

Array使用单独的变量名来存储一系列的值。

ArrayBuffer对象代表储存二进制数据的一段内存。

Array

var array = new Array(32);

上面代码创建32长度的Array(当然也可以不指定长度)，由于未赋值，只存储32个[undefined]，Array的长度可以随意更改，存储的数据也可以随意新增或删减更改。

ArrayBuffer

var buf = new ArrayBuffer(32);

上面代码生成了一段32字节(Byte)长度的内存区域，每个字节(Byte)的默认值都是为0。

Array和ArrayBuffer只是区别存储的数据不一样，ArrayBuffer只能存储Byte数据，一但确定长度后不允许更改，由于是一段内存地址，它不能直接读写，只能通过TypeArray和DataView操作

Byte又是什么鬼？

字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位，也表示一些计算机编程语言中的数据类型和语言字符。

1 byte = 8 bit

1 bit = 0 或 1

8个bit = (00000000或11111111) 2进制 相当可存储8个bit( 0 和 1)

尝试下：

最小值是00000000 (2进制)= 0

最大值是11111111(2进制) = 255 (10进制) = 0xFF(16进制)

到这里，对于Byte，也有相关的了解了，那么Byte可以做什么？

先了解下面内容：

ASCII :

ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。标准ASCII 码也叫基础ASCII码，使用7 位二进制数(剩下的1位二进制为0)来表示所有的大写和小写字母，数字0 到9、标点符号， 以及在美式英语中使用的特殊控制字符。

标准表          来源

Bin(二进制)Oct(八进制)Dec(十进制)Hex(十六进制)缩写/字符解释

0000 00000000NUL(null)空字符

0000 00011101SOH(start of headline)标题开始

0000 00102202STX (start of text)正文开始

0000 00113303ETX (end of text)正文结束

0000 01004404EOT (end of transmission)传输结束

………………

011110101721227Az小写字母z

011110111731237B{开花括号

011111001741247C|垂线

011111011751257D}闭花括号

011111101761267E~波浪号

011111111771277FDEL (delete)删除

双字节

解决中国、日本和韩国的象形文字符和ASCII的某种兼容性。

比如“你”字，占用两个字节

100111101100000 = 20320(10进制) = 0x4f60 (16进制) = \u4f60 (Unicode  )

输出：

当然也有每个国家发布的标准，像中国GB2312、GBK等

还有国际标准的Unicode

像UTF-8 等 想了解更多可以进入传送门

不同的编码存储，读取的方式也不一样，所以有些不同编码读取的时候引起的乱码就是基于这个原因，像UTF-8，GB2312，BGK。

byte怎么存储数据？

数据类型字节长度含义对应的C语言类型Int818位带符号整数signed char

Uint818位不带符号整数unsigned char

Uint8C18位不带符号整数(自动过滤溢出)unsigned char

Int16216位带符号整数short

Uint16216位不带符号整数unsigned short

Int32432位带符号整数int

Uint32432位不带符号的整数unsigned int

Float32432位浮点数float

Float64864位浮点数double

可存储的值

int8 带符号  -128~127

uint8  无符号 0~255

int16 带符号 -32768~32767

uint16 无符号 0~65535

int32 有符号 -2147483648~2147483647

uint32 无符号 0~4294967295

Float32和Float64，区别在于精度，float32又叫单精度浮点型，float64又叫做双精度浮点型。其最主要的区别就是小数点后面能跟的小数位数不同。

兼容性

—————————————————————————————————

ArrayBuffer只能存储Byte数据，一但确定长度后不允许更改，由于是一段内存地址。那么写入或读取Byte时是靠TypedArray和DataView。

ArrayBuffer只有裁剪和取得长度。

ArrayBuffer.prototype.byteLength //取得所分配内存区域的byte长度

* ArrayBuffer.prototype.slice()//拷贝生成一份新的ArrayBuffer对象 ，使用和Array一样

ArrayBuffer.isView() //返回一个布尔值，表示参数是否为ArrayBuffer的视图实例

*slice部分不支持

TypedArray:

ArrayBuffer对象作为内存区域，可以存放多种类型的数据。同一段内存，不同数据有不同的解读方式，这就叫做“视图”(view)。

TypedArray与Array操作差不多，可以直接操作byte数据

目前，TypedArray对象一共提供9种类型的视图，每一种视图都是一种构造函数

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属性

每种视图都有一个BYTES_PER_ELEMENT属性，表示这种数据类型占位的字节数

Int8Array.BYTES_PER_ELEMENT // 1

Uint8Array.BYTES_PER_ELEMENT // 1

Int16Array.BYTES_PER_ELEMENT // 2

Uint16Array.BYTES_PER_ELEMENT // 2

Int32Array.BYTES_PER_ELEMENT // 4

Uint32Array.BYTES_PER_ELEMENT // 4

Float32Array.BYTES_PER_ELEMENT // 4

Float64Array.BYTES_PER_ELEMENT // 8

构造函数：

new (type)Array(buffer,offset,length);

*type等于int8,int32等

例如：int32

var a = new ArrayBuffer(4);

var type = new Int32Array(a);

或int8

var a = new ArrayBuffer(1);

var type = new Int8Array(a);

从指定位置

var a = new ArrayBuffer(6);var type = new Int8Array(a); 从a第1位开始 长度6byte

var type1 = new Int8Array(a,2); 从a第3位开始 长度4byte

var type2 = new Int8Array(a,4,1);从a第5位开始，占据长度为1 byte

函数

Array数组的操作方法和属性，对TypedArray数组完全一样

TypedArray.prototype.copyWithin(target, start[, end = this.length])

TypedArray.prototype.entries()

TypedArray.prototype.every(callbackfn, thisArg?)

TypedArray.prototype.fill(value, start=0, end=this.length)

TypedArray.prototype.filter(callbackfn, thisArg?)

TypedArray.prototype.find(predicate, thisArg?)

TypedArray.prototype.findIndex(predicate, thisArg?)

TypedArray.prototype.forEach(callbackfn, thisArg?)

TypedArray.prototype.indexOf(searchElement, fromIndex=0)

TypedArray.prototype.join(separator)

TypedArray.prototype.keys()

TypedArray.prototype.lastIndexOf(searchElement, fromIndex?)

TypedArray.prototype.map(callbackfn, thisArg?)

TypedArray.prototype.reduce(callbackfn, initialValue?)

TypedArray.prototype.reduceRight(callbackfn, initialValue?)

TypedArray.prototype.reverse()

TypedArray.prototype.slice(start=0, end=this.length)

TypedArray.prototype.some(callbackfn, thisArg?)

TypedArray.prototype.sort(comparefn)

TypedArray.prototype.toLocaleString(reserved1?, reserved2?)

TypedArray.prototype.toString()

TypedArray.prototype.values()

————————————————————————————————–

尝试建立

//使用Array生成一个实例

var typedArray = new Uint8Array([1, 2, 3, 4]);

console.log( typedArray.buffer)// output arrayBuffer

//创建一段空ArrayBuffer

var arraybuffer = new ArrayBuffer(4)

var typedArray1 = new Uint8Array(arraybuffer );

console.log( typedArray1.buffer)// output arrayBuffer

var typedArray2 = new Uint8Array(64 );

console.log( typedArray2.buffer)// output arrayBuffer

尝试写入数据

//创建一个4 byte 长度的int8Array

var a = new Int8Array(4 );

a[0] = 0; //0x00

a[1] = 0;//0x00

a[2] = 255;//0xFF

a[3] = 255;//0xFF

//对应16进制是 0x0000FFFF

var d = new DataView(arraybuffer );

d.getInt8(0) //output 0

d.getInt8(1)//output 0

d.getInt8(2) // output -1

d.getInt8(3)//ouput -1

d.getUint8(0) //output 0

d.getUint8(1)//output 0

d.getUint8(2)//output 255

d.getUint8(3)//output 255;

d.getInt32(0) //output 65535

d.getUint32(0) //output 65535

多个视图

var buffer = new ArrayBuffer(24);

var idView = new Uint32Array(buffer, 0, 1);//字节0到字节3：1个32位无符号整数

var usernameView = new Uint8Array(buffer, 4, 16);//字节4到字节19：16个8位整数

var amountDueView = new Float32Array(buffer, 20, 1);//字节20到字节23：1个32位浮点数

DataView

一段数据包括多种类型(比如服务器传来的HTTP数据)，除了建立ArrayBuffer对象的复合视图以外，还可以通过DataView视图进行操作。

未完待续。。。