一、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应用的性能和用户体验。
