了解TypedArray：如何更高效地处理二进制数据

一、TypedArray是什么

TypedArray是JavaScript中一系列与ArrayBuffer相关的类型化数组构造函数的集合，支持对二进制数据进行高效处理。主要包括以下几种类型：

• Int8Array、Uint8Array、Uint8ClampedArray
• Int16Array、Uint16Array
• Int32Array、Uint32Array
• Float32Array、Float64Array

这些构造函数的目的是为了提供快速、可预测的操作二进制数据的方式。与普通的JavaScript数组相比，TypedArray数组是在底层表示和存储上更加接近底层二进制数据。因此，在数量庞大的数据处理中，使用TypedArray可以获得更高的性能和更少的内存开销。

二、与ArrayBuffer的关系

TypedArray是一系列与ArrayBuffer相关的类型化数组构造函数的集合。因此使用TypedArray最好的方式是先了解一下ArrayBuffer。

ArrayBuffer是一个通用的二进制数据容器，用于存储二进制数据。它可以与TypedArray一起使用，作为数据输入和输出的中介。创建一个ArrayBuffer的方法为：

let buffer = new ArrayBuffer(16);

上面的代码创建了一个长度为16个字节的ArrayBuffer。可以通过下标对这个ArrayBuffer进行访问：

let buffer = new ArrayBuffer(16);
let intArray = new Int32Array(buffer);   // 构造一个Int32Array

intArray[0] = 10;
console.log(buffer);    // ArrayBuffer { byteLength: 16 }

上述代码将ArrayBuffer作为Int32Array的构造函数的参数进行传递，并将Int32Array的第一个元素设置为10。最后输出的buffer的字节长度为16。

三、TypedArray中的各种类型

1. Int8Array、Uint8Array、Uint8ClampedArray

这三种类型都是用来处理8位二进制数据的。

• Int8Array：用于处理8位有符号整数，在-128到127之间。
• Uint8Array：用于处理8位无符号整数，在0到255之间。
• Uint8ClampedArray：使用Uint8ClampedArray会强制将不在0到255之间的值截断，因此适合处理图像数据等需要精确控制的二进制数据。

以下是三种类型的创建方式：

let int8Array = new Int8Array(8);
let uint8Array1 = new Uint8Array(8);
let uint8Array2 = new Uint8ClampedArray(8);

上述代码分别创建了一个长度为8的Int8Array、Uint8Array和Uint8ClampedArray。

2. Int16Array、Uint16Array

这两种类型都是用来处理16位二进制数据的。

• Int16Array：用于处理16位有符号整数。
• Uint16Array：用于处理16位无符号整数。

以下是两种类型的创建方式：

let int16Array = new Int16Array(8);
let uint16Array = new Uint16Array(8);

上述代码分别创建了一个长度为8的Int16Array和Uint16Array。

3. Int32Array、Uint32Array

这两种类型都是用来处理32位二进制数据的。

• Int32Array：用于处理32位有符号整数。
• Uint32Array：用于处理32位无符号整数。

以下是两种类型的创建方式：

let int32Array = new Int32Array(8);
let uint32Array = new Uint32Array(8);

上述代码分别创建了一个长度为8的Int32Array和Uint32Array。

4. Float32Array、Float64Array

这两种类型都是用来处理浮点型二进制数据的。

• Float32Array：用于处理32位浮点数字。
• Float64Array：用于处理64位浮点数字。

以下是两种类型的创建方式：

let float32Array = new Float32Array(8);
let float64Array = new Float64Array(8);

上述代码分别创建了一个长度为8的Float32Array和Float64Array。

四、TypedArray的基本操作

1. TypedArray的创建

TypedArray可以使用以下方式进行创建：

let array = new TypedArray(length);
let array = new TypedArray(buffer);
let array = new TypedArray(buffer, byteOffset, length);
let subarray = new TypedArray(sourceArray);
let subarray = new TypedArray(sourceArray, begin);
let subarray = new TypedArray(sourceArray, begin, end);

以上代码分别为不同的创建方式：

• 使用长度创建一个新的TypedArray
• 使用一个已有的ArrayBuffer创建一个新的TypedArray
• 使用一个已有的ArrayBuffer创建指定范围的TypedArray
• 从一个数组中创建一个子数组
• 从一个数组中创建指定范围的子数组

2. TypedArray的读取和设置

TypedArray的读取和设置方式与普通的JavaScript数组相同：

let array = new Int32Array(8);
array[0] = 123;
let value = array[0];
console.log(value);    // 123

3. TypedArray的迭代

TypedArray的迭代方式有两种，一种是通过for循环逐一迭代，另一种是使用TypedArray内置的forEach()方法进行迭代。

for循环的迭代方式如下：

let array = new Int32Array(8);
for(let i=0; i<array.length; i++) {
  console.log(array[i]);
}

TypedArray的forEach()方法可以像普通的数组一样使用：

let array = new Int32Array(8);
array.forEach(function(element) {
  console.log(element);
});

4. TypedArray的切割

与普通的JavaScript数组一样，TypedArray也支持数组的切割操作。该操作返回一个新的TypedArray。

let array = new Int32Array([1, 2, 3, 4, 5, 6, 7, 8]);
let slice = array.slice(2, 6);
console.log(slice);    // Int32Array [ 3, 4, 5, 6 ]

5. TypedArray的复制和拷贝

TypedArray也支持复制和拷贝操作。复制操作是直接赋值一个TypedArray，拷贝操作是创建一个新的TypedArray，并将旧的TypedArray中的数据拷贝到新的TypedArray中。

以下是TypedArray的复制和拷贝代码示例：

let array1 = new Int32Array(8);
let array2 = array1;    // 复制
let array3 = new Int32Array(8);
array3.set(array1);     // 拷贝

五、应用方面

TypedArray在许多应用中得到了广泛的应用。以下是一些示例。

1. 图像处理

Web应用中的图像处理通常需要解码和处理大量的二进制图片数据。使用TypedArray可以快速、高效地处理二进制图像数据，以便进行图像处理、增强和压缩等操作。

2. 网络通信

在Web应用中，客户端与服务端之间通常需要进行大量的网络通信。使用TypedArray可以帮助实现高效、可靠的网络通信并提高数据处理的速度。

3. 流媒体数据

流媒体数据通常是大量的数据流，使用TypedArray可以快速处理、解码和压缩这些数据，以便在Web应用中实现高质量的媒体体验。

六、总结

TypedArray是JavaScript中一个强大的二进制数据处理工具，它提供了以底层二进制数据为中心的高效、可预测的数据处理方式。在Web应用的许多方面，TypedArray都有大量的应用，如图像处理、网络通信和流媒体数据等。学习使用TypedArray可以使我们更有效地处理大量的二进制数据，提高Web应用的性能和用户体验。