2021-07-03

Array Buffer

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）是计算机信息技术用于计量存储容量的一种计量单位，也表示一些计算机编程语言中的数据类型和语言字符。

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 0000 0 0 00 NUL(null) 空字符
0000 0001 1 1 01 SOH(start of headline) 标题开始
0000 0010 2 2 02 STX (start of text) 正文开始
0000 0011 3 3 03 ETX (end of text) 正文结束
0000 0100 4 4 04 EOT (end of transmission) 传输结束
… … … … … …
01111010 172 122 7A z 小写字母z
01111011 173 123 7B { 开花括号
01111100 174 124 7C | 垂线
01111101 175 125 7D } 闭花括号
01111110 176 126 7E ~ 波浪号
01111111 177 127 7F DEL (delete) 删除
双字节

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

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

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

输出：

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

还有国际标准的Unicode

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

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

byte怎么存储数据？

数据类型字节长度含义对应的C语言类型
Int8 1 8位带符号整数 signed char
Uint8 1 8位不带符号整数 unsigned char
Uint8C 1 8位不带符号整数（自动过滤溢出） unsigned char
Int16 2 16位带符号整数 short
Uint16 2 16位不带符号整数 unsigned short
Int32 4 32位带符号整数 int
Uint32 4 32位不带符号的整数 unsigned int
Float32 4 32位浮点数 float
Float64 8 64位浮点数 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视图进行操作。

未完待续。。。

前端技术分享

前端技术分享

Array Buffer