JavaScript - TypedArray 对象
什么是 TypedArray?
JavaScript TypedArray 是一个类似数组的对象，用于存储二进制数据。与数组不同，TypedArray 的大小不能动态变化，也不能保存不同数据类型的值，从而提高了 TypedArray 的性能。
TypedArray 用于音频处理、图形渲染、网络等。
为什么使用 TypedArray?
在其他编程语言(例如 C++)中，数组只能包含一种数据类型的数据，但 JavaScript 数组略有不同。它可以包含多种数据类型的元素。因此，JavaScript 数组在处理二进制数据以及需要更高性能的情况下效率较低。
这也是 JavaScript 引入 TypedArray 的原因之一，它也被称为数组缓冲区。 TypedArray 是处理二进制数据并节省内存的最佳方式。
TypedArray 对象
以下是可用于存储 8、16、32 或 64 位数据的 TypedArray 对象类型。您可以根据需要存储的数据选择任意对象来创建 TypedArray。
| 序号 | TypedArray | 数据类型 | 范围 | Example |
|---|---|---|---|---|
| 1 | Int8Array |
8位二进制补码有符号整数(字节) | -28 到 127 | new Int8Array([92, 17, -100]) |
| 2 | Uint8Array | 8位无符号整数 | 0 到 255 | new Uint8Array([132, 210, 0]) |
| 3 | Uint8ClampedArray | 8 位无符号整数 | 0 到 255 | new Uint8ClampedArray([90, 17, 70]) |
| 4 | Int16Array |
短整数 | -32768 到 32767 | new Int16Array([1000, -2000, 150]) |
| 5 | Uint16Array | 无符号短整型 | 0 到 65535 | new Uint16Array([50, -6535, 12000]) |
| 6 | Int32Array |
有符号长整型 | -2147483648 到 2147483647 | new Int32Array([1000000, -2000000, 9876]) |
| 7 | Uint32Array | 无符号长整数 | 0 到 4294967295 | new Uint32Array([100, 42967295, 0]) |
| 8 | Float32Array | 浮点数(7 位有效数字) | ±1.2x10^-38 到 ±3.4x10^38 | new Float32Array([3.134, 1.618, -0.5]) |
| 9 | Float64Array | 双精度(16 位有效数字) | ±5.0x10^-324 至 ±1.8x10^308 | new Float64Array([2.78, -12.35, 99.9]) |
| 10 | BigInt64Array | 大有符号整数 | -2^63 至 2^63 − 1 | new BigInt64Array([-9071954740991n, 9719925474991n]) |
| 11 | BigUint64Array | 大无符号整数 | 0 到 2^64 - 1 | new BigUint64Array([0n, 18446744709551615n]) |
TypedArray 不支持 push()、pop 等方法，但支持的属性和方法如下。
TypedArray 属性
以下是 TypedArray 对象的属性列表及其说明 -
| Sr.No. | 属性和说明 |
|---|---|
| 1 |
构造函数 返回一个数组缓冲区构造函数。 |
| 2 |
byteLength 返回 TypedArray 的字节长度。 |
| 3 |
maxByteLength 返回用于扩展 TypedArray 大小的最大字节长度。 |
| 4 |
resizable 检查 TypedArray 是否可调整大小。 |
TypedArray 静态方法
以下是 TypedArray 对象的静态方法列表及其说明 -
| 序号 | 方法 | 说明 |
|---|---|---|
| 1 | from() |
返回一个新的 Array 实例。 |
| 2 | 返回一个新的 Array 实例。 |
TypedArray 实例方法
以下是 TypedArray 对象的实例方法列表及其说明 -
TypedArray 实例方法
| 序号 | 方法 | 描述 |
|---|---|---|
| 1 | 返回类型化数组中与给定索引匹配的元素。 |
|
| 2 | 返回修改后的 TypedArray，但不改变原始 TypedArray 的长度。 |
|
| 3 | 返回一个新的数组可迭代对象。 |
|
| 4 | 如果类型数组中的所有元素都通过回调函数实现的测试，则返回 true，否则返回 false。 |
|
| 5 | 返回修改后的类型数组，该数组填充了指定的值。 |
|
| 6 | 它返回一个类型化数组的新副本，该副本仅包含通过测试的元素。 |
|
| 7 | 它返回第一个满足所提供测试函数的 TypedArray 元素，否则返回"undefined"。 |
|
| 8 | 返回 TypedArray 中第一个满足所提供测试函数的元素的索引，否则返回 '-1'。 |
|
| 9 | 返回 TypedArray 中最后一个满足所提供测试函数的元素，如果未找到则返回 'undefined'。 |
|
| 10 | 返回类型数组中通过测试的最后一个元素，如果未找到则返回 -1。 |
|
| 11 | 返回 none(未定义)。 |
|
| 12 | 如果在类型数组中找到 searchElement，则返回"true";否则返回 'false'。 |
|
| 13 | 返回 searchElement 的第一个索引。 |
|
| 14 | 通过连接类型数组的所有元素返回一个字符串。 |
|
| 15 | 返回一个新的可迭代迭代器对象。 |
|
| 16 | 它返回类型数组中 searchElement 的最后一个索引。如果搜索元素不存在，则返回 -1。 |
|
| 17 | 它通过对每个元素执行回调函数来返回一个新的类型化数组。 |
|
| 18 | 它返回一个值，该值是从对整个类型化数组运行"reducer"回调函数到完成的输出值。 |
|
| 19 | 它返回一个由约简得到的值。 |
|
| 20 | 它以相反的顺序返回原始类型数组的引用。 |
|
| 21 | 它返回无(未定义)。 |
|
| 22 | 返回一个新的类型化数组，包含从原始类型化数组中提取的元素。 |
|
| 23 | 如果类型化数组中至少一个元素通过了所提供函数实现的测试，则返回 true;否则返回 false。 |
|
| 24 | 它返回按排序顺序排列的相同类型数组的引用。 |
|
| 25 | 它返回一个新的 TypedArray 对象。 |
|
| 26 | 返回一个表示类型化数组元素的字符串。 |
|
| 27 | 返回一个包含逆序元素的新类型化数组。 |
|
| 28 | 返回一个元素按升序排列的新类型化数组顺序。 |
|
| 29 | 返回一个表示类型化数组元素的字符串。 |
|
| 30 | 返回一个新的数组可迭代对象。 |
|
| 31 | 返回一个新的类型化数组，其索引处的元素将被替换为指定值。 |
示例
示例 1
在下面的示例中，我们使用 Int8Array 创建了一个 TypedArray。我们将包含多个元素的数组作为对象构造函数传递。
在输出中，您可以看到，如果任何输入元素大于 8 位数，构造函数会自动将其强制为 8 位数。
<html>
<body>
<p id = "output"> </p>
<script>
const array = new Int8Array([1000, 200, 30, 40]);
document.getElementById("output").innerHTML = "The array is: " + array;
</script>
</body>
</html>
输出
The array is: -24,-56,30,40
示例 2
在下面的示例中，我们使用 Float32Array() 构造函数创建了一个 TypedArray。它用于存储 32 位浮点数。
此外，您可以像普通数组一样访问或更新 TypedArray 元素。
<html>
<body>
<p id = "output"> </p>
<script>
const array = new Float32Array([100.212, 907.54, 90, 14562547356342.3454]);
array[2] = 23.65; // Updating the 3rd element of the array
document.getElementById("output").innerHTML = "The array is: " + array;
</script>
</body>
</html>
输出
The array is: 100.21199798583984,907.5399780273438,23.649999618530273,14562546941952
