二进制数组ArrayBuffer

Posted 2020-12-22 pengsn

概述

接口设计的原始目的，与WebGL项目有关。 所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足
javascript与显卡之间的大量的数据、实时的数据交换，他们之间的通信必须是二进制的，而不能是传统的文本格式

• ArrayBuffer对象 代表原始的二进制数据
• TypedArray 用来读写简单类型的二进制数据
• DataView 用来读写复杂的类型的二进制数据

已知操作浏览器的API，用到了二进制数组的有

• File API
• XMLHttpRequest
• Fetch API
• Canvas
• WebSocket

ArrayBuffer对象

只能通过视图（TypeArray视图和DataView视图）来读写，视图的作用是以指定的格式来解读二进制数据
ArrayBuffer也是一个构造函数，可以分配一段存放数据的连续内存空间

var buf = new ArrayBuffer(32); //32字节

ArrayBuffer.prototype.byteLength

• 返回所分配的内存区域的字节长度

var buffer = new ArrayBuffer(32);
console.info(buffer.byteLength); //32

ArrayBuffer.prototype.slice()

• 允许将内存区域的一部分，拷贝到一个新的ArrayBuffer对象

var buffer = new Arraybuffer(8);
var newBuffer = buffer.slice(0,3); // 分配一个新的内存，将原来的值赋值过去

Arraybuffer.isView()

• 静态方法isView，返回一个boolean值，表示参数是否为ArrayBuffer的视图实例

var buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer); //false

var v = new Int32Array(buffer);
ArrayBuffer.isView(v); //true

TypedArray视图

• 一组构造函数，代表不同的数据格式

• Int8Array 8位有符号 len = 1

• Uint8Array 8位无符号 len = 1

• Unit8ClampedArray 8位无符号整数，len = 1，溢出处理不同

• Int16Array 16位有符号 len = 2

• Uint16Array 16位无符号 len = 2

• Int32Array(buffer); 32位有符号 len = 4

• UnitArray(buffer); 32位无符号 len = 4

• Float32Array 32位浮点数 len = 4

• Float64Array 64位浮点数 len = 8

• 构造方式

• TypedArray(buffer, byteOffset, length?);

var b = new ArrayBuffer(8);
var v1 = new Int32Array(b);

var v2 = new Unit8Array(b, 2);

var v3 = new Int16Array(b, 2, 2);

• TypedArray(length)

var abcd = new Float64Array(8);
abcd[0] = 10;

• TypedArray(typedArray)

var typedArray = new Int8Array(new Unit8Array(8));

• TypedArray(arrayLikeObject)

var typeArray = new Unit8Array([1,2,3,4,5]);

复合视图

• 由于视图的构造函数可以指定起始位置和长度，所以在同一段内存中，可以依次存放不同类型的数据

var buffer = new ArrayBuffer(24);

var idView = new Int32Array(buffer, 0, 1);
var nameVidw = new Int32Array(buffer, 4, 1);
var ageVidw = new Int32Array(buffer, 8, 1);

DataView视图

• DataView 视图本身也是构造函数，，接受一个ArrayBuffer对象作为参数，生成视图

   DataView(ArrayBuffer buffer[, 字节起始位置 [, 长度]])

• 大端字节序读取与小端字节序读取不同; 默认是大端字节序读取数据
• dv.getUint16(1, true) // 小端
• dv.getUint16(3, false) // 大端

二进制数组的应用

ajax, canvas, file, websocket, fetch

var canvas = document.getElmentById(‘myCanvas‘);
var ctx = canvas.getContext(‘2d‘);

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data;

uint8ClampedArray 类型专门针对颜色，把每个字节解读成无符号的8位整数，即只能取值0~255，
而且发生运算的时候自动过滤高位溢出; 即超过255，处理结果为255， 小于0处理结果为0