定型数组:
webGL(WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化)
和javascript数组之间发生冲突,在拿到javascript的数组后,webGL先迭代一遍转化为自己格式的数组,这就会花费不少时间,所以为了解决这个问题,WebGL就为javascript专门提供一个接口,允许javascript运行时访问一块叫ArrayBuffer的预分配内存,这就方便把数据以二进制形式存到内存中了,并提供读取方法。
ArrayBuffer
ArrayBuffer是所有定型数组及视图引用的基本单位,ArrayBuffer()就是一个普通的构造函数,可以在内存中分配特定数量的字节空间,ArrayBuffer一经创建就不能调整大小,不过可以通过slice()复制其全部或者部分到新实例中
const buf = new ArrayBuffer(16); //内存中分配16字节
alert(buf.byteLength); //16
const buf2 = buf.slice(4,12);
alert(buf2.byteLength); //8
注:1、声明的ArrayBuffer会将所有二进制位初始为0
2、ArrayBuffer分配的堆内存可以被当成垃圾回收,不需手动清除
ElementType
ElementType 字节 说明
Int8 1 8位有符号的整数
Uint8 1 8位有符号的整数
Int16 2 16位有符号的整数
Uint16 2 32位有符号的整数
Int32 4 32位有符号的整数
Uint32 4 32位有符号的整数
Float32 4 32位有符号的整数
Float64 8 64位有符号的整数
DataView:
第一种允许读写ArrayBuffer的视图就是DataView
const buf = new ArrrayBuffer(2) //分配两个字节
const view = new DataView(buf) //声明一个dataview
alert (view.getInt16(0)) //0 (字节偏移量为0,从0开始,两个字节都为0)
alert(view.setUint8(0,255)) //1 (字节偏移量为0,从0开始,缓冲为1,因为255的二进制位11111.....)
定型数组
与DataView一样,定型数组也可以操作ArrayBuffer,但是它继承了Array中许多方法,可以更加方便的操作ArrayBuffer
const buf = new ArrayBuffer(12); //创建一个12字节的缓存
const ints = new Int32Array(buf); //创建一个引用该缓冲的Ints32Arrays
alert(ints.length) // 3 int32的字节大小位4 12/4=3
//set()从提供的数组或定型数组中把值复制到当前定型数组中指定的索引位置(换句话就是复制进来)
const container = new Int16Array(8);
container.set(Int8Array.of(1,2,3,4)); //将这四个值复制进来
console.log(container) //[1,2,3,4,0,0,0,0]
//subarray从原始定型数组中复制的值返回一个新的定型数组,索引值可选(换句话就是复制出去)
const source = Int16Array.of(2,4,6,8);
const copy = source.subarray(1,3);
console.log(copy) //[4,6]
网友评论