js，JavaScript 类型化数组详解（2024-05-04）

1、JavaScript 类型化数组

在 Javascript 中，类型化数组是二进制数据的类似数组的缓冲区。

不存在名为 TypedArray 的 JavaScript 属性或对象，但属性和方法可以与类型化数组对象一起使用：

const myArr = new Int8Array(10);
// 0,0,0,0,0,0,0,0,0,0

2、类型化数组的对象

类型化数组的对象

对象	            数据类型	                    范围
Int8Array	        有符号整数（字节）	        -128/127
Uint8Array	        无符号整数（八位字节）	    0/255
Uint8ClampedArray	无符号整数（八位字节）	    0/255
Int16Array	        短整数	                    -32768/32767
Uint16Array	        无符号短整数	                0/65535
Int32Array	        有符号长整数	                -231/231-1
Uint32Array	        无符号长整数	                0/232
Float32Array	    浮点 - 7 位有效数字	        1.2x10-38/3.4x1038
Float64Array	    双精度浮点 - 16 位有效数字	5.0x10-324/1.8x10308
BigInt64Array	    有符号大整数	                -263/263-1
BigUint64Array	    无符号大整数	                0/264

说明

类型化数组不是数组。

类型化数组上的 isArray() 返回 false。

类型化数组不支持许多数组方法（如 push 和 pop）。

类型化数组是类似数组的对象，用于在内存中存储二进制数据。

3、Typed Array 方法和属性

BYTES_PER_ELEMENT	计算用于存储一个元素的字节数的属性。
fill()	            用一个值填充所有元素。
find()	            返回满足条件的第一个元素。
name	            返回类型化数组的名称。
of()	            用数组创建类型化数组。
some()	            如果一个元素满足条件，则返回 true。

4、Uint8Array 对比 Uint8ClampedArray

Uint8Array 和 Uint8ClampedArray 之间的区别在于如何添加值。

如果将 Uint8ClampedArray 中的一个元素设置为 0-255 范围之外的值，它将默认为 0 或 255。

类型化数组将只取值的前 8 位。

5、类型化数组的好处

类型化数组提供了一种处理二进制数据的方法，就像在 C 中工作的数组一样有效。

类型化数组是原始内存，因此 JavaScript 可以将它们直接传递给任何函数，而无需将数据转换为另一种表示形式。

类型化数组比普通数组快得多，用于将数据传递给可以使用原始二进制数据的函数（计算机游戏、WebGL、Canvas、文件 API、媒体 API）。

6、浏览器 API 支持类型化数组

Fetch API 实例

fetch(url)
.then(request => request.arrayBuffer())
.then(arrayBuffer =>...);

Canvas 实例

const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;