HTML5引入的新数组TypedArray介绍

什么是TypedArray？

在ES6之前，JavaScript中只有一种数组，即Array。Array在性能上有一些缺陷，例如对于大数组的处理速度会相对较慢。为了解决这个问题，HTML5引入了新的数组类型TypedArray。

TypedArray是一种基于数组结构的类型化数组，它是一种定长、可以呈现多种类型（如32位整型、64位双精度浮点数等）数据的数组类。TypedArray的底层是由固定的二进制数据类型组成，这大大提高了它的性能。

TypedArray以语言本身支持的底层内存模型形式出现，因此它们无法通过Array对象的任何构造函数生成，而必须使用TypedArray类的特定构造函数之一创建。

怎么使用TypedArray？

我们可以通过以下方法来创建一个TypedArray：

var typedArray = new TypedArray(length);

// 例如
var intArray = new Int32Array(10);
var floatArray = new Float64Array(5);

以上代码将创建一个Int32Array类型的数组，长度为10。

可以将其视为一种原始类型的数组，列出以下类型：

• Int8Array、Uint8Array和Uint8ClampedArray;
• Int16Array和Uint16Array;
• Int32Array和Uint32Array;
• Float32Array和Float64Array。

TypedArray对象还有以下属性：

• length: 只读，表示TypedArray中当前元素的数量；
• buffer: 只读，指向TypedArray所引用的ArrayBuffer对象，也就是它的缓冲区；
• byteLength: 只读，TypedArray对象占据的内存长度；
• byteOffset: 只读，TypedArray对象在缓冲区的偏移量，即从缓冲区的哪个位置开始读？

例如，以下代码创建一个Int8Array类型的数组：

var buffer = new ArrayBuffer(8);  // 共享的内存
var int8View = new Int8Array(buffer);  // 视图可以通过buffer存取内存

以上代码中，我们构建了一个新的ArrayBuffer，该内存区域可以被多个TypedArray同时共享。而int8View将缓冲区解释为一个8位有符号整型数组直接访问内存。

示例说明

下面我们以Int8Array类型为例，演示一下如何使用TypedArray。首先，我们创建一个长度为3的Int8Array类型的数组：

var myIntArray = new Int8Array(3);

接下来，我们向这个数组中添加元素：

myIntArray[0] = 10;
myIntArray[1] = 20;
myIntArray[2] = 30;

我们还可以通过构造函数将常规数组转换为TypedArray：

var regularArray = [40, 50, 60];

var typedArray = new Int8Array(regularArray);

除了以上方法，我们还可以通过以下方式构建：

var typedArray = new TypedArray(arrayBuffer[, byteOffset [, length]]);

以上代码通过ArrayBuffer创建一个TypedArray对象，其中：

• arrayBuffer：一个ArrayBuffer对象，表示强制类型化数组的缓冲区；
• byteOffset（可选）：在ArrayBuffer中的开始位置，以每个元素占用的字节数为单位，默认为0；
• length（可选）：指定从给定缓冲区的偏移量（以字节为单位）开始的新TypedArray应该拥有的元素数。

例如：

// 创建一个类型化数组，它使用与整个 ArrayBuffer 共享的内存缓冲区。
var buffer = new ArrayBuffer(8);
var int8View = new Int8Array(buffer);

我们可以在MDN中详细了解TypedArray类型。

总结

TypedArray是HTML5引入的新类型，可以大大提高处理大数组时的性能。它有固定的二进制数据类型组成，可以通过TypedArray类特定的构造函数创建。使用TypedArray，我们可以像平常的数组一样对数组进行操作，但是我们强制规定了数据类型，这使得它非常有效率。