JavaScript 类型化数组

JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。
Array 存储的对象能动态增多和减少，并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化，以便对数组的操作可以很快。

一般而言，类型化数组通常会与WebGL一起使用，在使用WebGL的时候，ArrayBuffer无处不在。浏览器通过WebGL和显卡进行通信，它们之间会发生大量的、实时的数据交互，对性能的要求特别高，它们之间的数据通信必须是二进制的才能满足性能要求，而不能是传统的文本格式。

缓冲和视图：类型数组架构

为了达到最大的灵活性和效率，JavaScript 类型数组（Typed Arrays）将实现拆分为缓冲和视图两部分。一个缓冲（由 ArrayBuffer 对象实现）描述的是一个数据块。缓冲没有格式可言，并且不提供机制访问其内容。为了访问在缓冲对象中包含的内存，你需要使用视图。视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。
在这里插入图片描述

ArrayBuffer

ArrayBuffer 是一种数据类型，用来表示一个通用的、固定长度的二进制数据缓冲区。不能直接操纵一个ArrayBuffer中的内容；你需要创建一个类型化数组的视图或一个描述缓冲数据格式的DataView，使用它们来读写缓冲区中的内容

数据视图

DataView 是一种底层接口，它提供有可以操作缓冲区中任意数据的读写接口。这对操作不同类型数据的场景很有帮助，例如：类型化数组视图都是运行在本地字节序模式(参考 Endianness)，可以通过使用 DataView 来控制字节序。默认是大端字节序(Big-endian)，但可以调用读写接口改为小端字节序(Little-endian)。

使用例子：

<script type="text/javascript">
	//创建一个16字节固定长度的缓冲
	var buffer = new ArrayBuffer(16);
	console.log("创建缓冲：")
	console.log(buffer)
	if (buffer.byteLength === 16) {
	  console.log("Yes, it's 16 bytes.");
	} else {
	  console.log("Oh no, it's the wrong size!");
	}
	// 创建视图
	// 此视图将把缓冲内的数据格式化为一个32位的有符号整数数组
	var int32View = new Int32Array(buffer);
	console.log("视图转换：")
	console.log(int32View)
	for (var i = 0; i < int32View.length; i++) {
	  int32View[i] = i * 2;
	}
	// 将类型化数组转换为普通数组
	var array = Array.from(int32View)
	console.log("普通数组：")
	console.log(array)
</script>

效果：
在这里插入图片描述