了解 ES6 TypedArray 和 DataView

背景

为了在 WebGL 中高效地操作二进制数据，ES6 为浏览器引入了 TypedArray 和 DataView，两个操作底层二进制数据的视图。因为具有直接操作内存的能力而不用进行转换，在处理 WebGL 二进制数据上性能远高于 Array。

ArrayBuffer

Js中的数值类型都是float64进行存储，在内存中占据 64bit 即 8byte，尽管只存储 ‘1’ 这个值，同样需要申请 8byte 的空间，相当于浪费 63bit :)
ArrayBuffer的作用是创建一个二进制数据的缓冲区，创建之后不能直接对缓冲区进行操作，必须构建视图，通过视图进行数据操作。ArrayBuffer并不是一个新的类型，而是新的接口，通过构造，可以返回一段包含指定字节数量的内存地址。

const buffer = new ArrayBuffer(8); // 我们创建了一个包含8字节的数据缓冲区console.log(buffer.byteLength); // 8

视图

在创建缓冲区的时候，我们按照字节为单位，8个字节长度即64位，我们通过视图可以对这64位的长度的内存空间进行指定类型地读写。

DataView

DataView接口提供了八种类型的数据的读写，包括 ：

• int8

• unit8

• int16

• uint16

• int32

• uint32

• float32

• float64

const buffer = new ArrayBuffer(8);const view = new DataView(buffer);

view.setInt8(0, 126);
view.setInt8(1, 100);
view.setInt8(2, -120);
view.setInt8(3, 128);console.log(view.getInt8(0)); // 126console.log(view.getInt8(1)); // 100console.log(view.getInt8(2)); // -120console.log(view.getInt8(3)); // -128，带符号的8位数最大为127，溢出后再读取从第三个字节段开始的带符号8位数值，结果是-128

DataView.prototype.setInt8 可以从指定的字节段开始存储数据，方法包括3个参数：byteOffset: number,value:number,littleEndian:boolean。第一个表示想从那一个字节段开始存储数据，第二个是存储的值（10进制），第三个是大字节序或者小字节序，默认为 true。
DataView.prototype.getInt8可以获取从指定字节段开始的int8型数据，方法包括2个参数：byteOffset: number,littleEndian:boolean
其他类型的操作和int8一样。
Dataview是一种通用视图，不仅仅可以对指定字节段进行读写，还可以在同一缓冲区内使用不同类型的数据，这样可以提高内存利用效率。

const buffer = new ArrayBuffer(8); // 8个字节段const view = new DataView(buffer);

view.setUint8(0, 250);
view.setInt32(1, 78787878);// 由于32位数值占四个字节，所以下一个存储操作应该从第五个字节段地址开始view.setInt16(5, 1000);
view.setInt8(7, 126)console.log(view.getUint8(0)); // 250console.log(view.getInt32(1)); // 78787878console.log(view.getInt16(5)); // 1000console.log(view.getInt8(7)); //126

其实 set 和 get 的类型没有强制对应，因为这些操作只是从一个内存地址开始，读取或写入一定长度的值。

view.setInt32(1, 78787878);
view.getInt8(1); // 4

得到4的原因是，32位存储78787878且默认小字节序即：
0000 0100 1011 0010 0011 0101 0010 0110
读取的时候只读取8位且默认也是小字节序即从上面的32位取：
0000 0100
得 4

TypeArray

TypedArray视图和DataView的区别在于，TypedArray是特定类型的视图，实际上并没有一个构造器叫TypedArray，其使用主要分为9个不同的类型：

在创建TypedArray视图前，仍然需要一个数据缓冲区，不过有更加简洁的写法。

• 由 ArrayBuffer 创建

const buffer = new ArrayBuffer(8);const view = new Int8Array(buffer);

view[0] = 128;
view[1] = 2;
view[2] = 100;console.log(view); // Int8Array [ -128, 2, 100, 0, 0, 0, 0, 0 ]

因为 view[0] 我们设置了128，但是有符号的8位数，最大的正数为 0111 1111 即127，128 为 1000 0000 符号位1表示负数，负数的数值需要取反加1，所以128在转换为8位带符号数后为 -128。
和DataView一样，TypedArray也可以使一个buffer中有着不同类型的元素：

const buffer = new ArrayBuffer(12);const view8 = new Int8Array(buffer, 0, 4);
view8[0] = 100;
view8[1] = 128;
view8[2] = -126;
view8[3] = 5;console.log(view8); // Int8Array [ 100, -128, -126, 5 ]const view16 = new Int16Array(buffer, 4, 2);
view16[0] = 32768;
view16[1] = 32767;console.log(view16); // Int16Array [ -32768, 32767 ]const view32 = new Int32Array(buffer, 8, 1);
view32[0] = 2147483648;console.log(view32); // Int32Array [ -2147483648 ]// 由于buffer已经被写入，我们可以通过DataView来读取const view = new DataView(buffer);console.log(view.getInt8(0, true)); // 100console.log(view.getInt8(1, true)); // -128console.log(view.getInt8(2, true)); // -126console.log(view.getInt8(3, true)); // 5console.log(view.getInt16(4, true)); // -32768console.log(view.getInt16(6, true)); // 32767console.log(view.getInt32(8, true)); // -2147483648

需要注意类型的字节长度和字节偏移。

• 指定元素数量

const view = new Int8Array(8); // 表示view包括8个元素，每个占用8字节

• 传入数组

const arr = [127, 100, 128];const view = new Int8Array(arr);console.log(view); // Int8Array [ 127, 100, -128 ]

需要注意的是，传入的数组元素需要符合要创建的视图类型，这一点需要先保证，不然则会溢出。

• Uint8ClampedArray
  创建Uint8ClampedArray视图的时候，不会发生元素溢出，会将溢出值固定在类型的最小值或者最大值。

const arr = [127, 100, -128, 65535, 256];const view = new Uint8ClampedArray(arr);console.log(view); // Uint8ClampedArray [ 127, 100, 0, 255, 255 ]

在canvas的 ImageData 中就是用Uint8ClampedArray来表示图片的pixel信息。

end

另外TypedArray 和 DataView还有其他的特殊方法，可以参考：
TypedArray
DataView
ArrayBuffer
需要注意的是TypedArray和DataView只是底层数据缓冲区的视图，若缓冲区数据发生改变，视图也会改变。

作者：VoyagerOne
链接：https://www.jianshu.com/p/51c8f3e7a25a