JavaScript TypedArray

JavaScript 中的 TypedArray 是一种类似于数组的对象，用于存储二进制数据。不同于普通的数组，TypedArray 的大小是固定的，不能动态改变，也不能存储不同类型的数据，这样提高了 TypedArray 的性能。

TypedArray 主要应用于音频处理、图形渲染、网络通信等领域。

为什么使用 `TypedArray`？

在其他编程语言如 C++ 中，数组只能包含单一数据类型的元素，而 JavaScript 数组略有不同，它可以包含多种数据类型的元素。因此，当处理二进制数据或需要更高性能时，JavaScript 数组效率较低。

这就是为什么引入了 TypedArray，它也被称作数组缓冲区（Array Buffer）。TypedArray 是处理二进制数据同时保持内存效率的最佳方式。

`TypedArray` 对象

下面列出了可用的 TypedArray 对象类型，它们用于存储 8 位、16 位、32 位或 64 位的数据。你可以根据需要存储的数据选择适当的对象来创建 TypedArray。

序号	`TypedArray` 类型	数据类型	范围	示例
1	`Int8Array`	8 位补码整数	-128 到 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`	16 位整数	-32768 到 32767	`new Int16Array([1000, -2000, 150])`
5	`Uint16Array`	16 位无符号整数	0 到 65535	`new Uint16Array([50, -6535, 12000])`
6	`Int32Array`	32 位整数	-2147483648 到 2147483647	`new Int32Array([1000000, -2000000, 9876])`
7	`Uint32Array`	32 位无符号整数	0 到 4294967295	`new Uint32Array([100, 42967295, 0])`
8	`Float32Array`	单精度浮点数	±1.2x10^-38 到 ±3.4x10^38	`new Float32Array([3.134, 1.618, -0.5])`
9	`Float64Array`	双精度浮点数	±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` 属性

序号	属性	描述
1	`constructor`	返回一个数组缓冲区构造函数。
2	`byteLength`	返回 `TypedArray` 的字节长度。
3	`maxByteLength`	返回扩展 `TypedArray` 大小的最大字节长度。
4	`resizable`	检查 `TypedArray` 是否可调整大小。

`TypedArray` 静态方法

序号	方法	描述
1	`from()`	返回一个新的数组实例。
2	`of()`	返回一个新的数组实例。

`TypedArray` 实例方法

序号	方法	描述
1	`at()`	返回匹配给定索引的 `TypedArray` 中的元素。
2	`copyWithin()`	返回修改后的 `TypedArray`，不改变原 `TypedArray` 的长度。
3	`entries()`	返回一个新的数组可迭代对象。
4	`every()`	如果 `TypedArray` 中所有元素都通过由提供的函数实现的测试，则返回 `true`，否则返回 `false`。
5	`fill()`	返回填充了指定值的修改后的 `TypedArray`。
6	`filter()`	返回一个新的包含仅通过测试的元素的 `TypedArray` 副本。
7	`find()`	返回满足提供测试函数的第一个元素，否则返回 `undefined`。
8	`findIndex()`	返回满足提供测试函数的第一个元素的索引，否则返回 `-1`。
9	`findLast()`	返回满足提供测试函数的最后一个元素，否则返回 `undefined`。
10	`findLastIndex()`	返回满足测试的第一个元素的最后一个索引，如果没有找到则返回 `-1`。
11	`forEach()`	返回 `undefined`。
12	`includes()`	如果在 `TypedArray` 中找到了 `searchElement` 则返回 `true`，否则返回 `false`。
13	`indexOf()`	返回 `searchElement` 的第一个索引。
14	`join()`	通过连接 `TypedArray` 中的所有元素返回一个字符串。
15	`keys()`	返回一个新的可迭代迭代器对象。
16	`lastIndexOf()`	返回 `searchElement` 在 `TypedArray` 中的最后一个索引，如果未找到则返回 `-1`。
17	`map()`	通过对每个元素执行回调函数返回一个新的 `TypedArray`。
18	`reduce()`	返回从整个 `TypedArray` 上运行完成的 "reducer" 回调函数的结果值。
19	`reduceRight()`	返回从 `TypedArray` 减少得到的结果值。
20	`reverse()`	返回逆序的原 `TypedArray` 的引用。
21	`set()`	返回 `undefined`。
22	`slice()`	返回包含从原 `TypedArray` 提取元素的新 `TypedArray`。
23	`some()`	如果至少有一个元素通过提供的函数实现的测试，则返回 `true`，否则返回 `false`。
24	`sort()`	返回排序后的同一个 `TypedArray` 的引用。
25	`subarray()`	返回一个新的 `TypedArray` 对象。
26	`toLocaleString()`	返回代表 `TypedArray` 元素的字符串。
27	`toReversed()`	返回包含逆序元素的新 `TypedArray`。
28	`toSorted()`	返回包含升序排序元素的新 `TypedArray`。
29	`toString()`	返回代表 `TypedArray` 元素的字符串。
30	`values()`	返回一个新的数组可迭代对象。
31	`with()`	返回用指定值替换索引处元素的新 `TypedArray`。

示例

示例 1

在下面的例子中，我们使用 Int8Array 创建了一个 TypedArray。我们将包含多个元素的数组作为对象构造函数的参数传递。

在输出中，你可以看到如果任何输入元素大于 8 位数字，构造函数会自动将其强制为 8 位数字。

<html>
<body>
   <p id="output"> </p>
   <script>
      const array = new Int8Array([1000, 200, 30, 40]);
      document.getElementById("output").innerHTML = "数组是: " + array;
   </script>
</body>
</html>

输出：

数组是: -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; // 更新数组的第三个元素
      document.getElementById("output").innerHTML = "数组是: " + array;
   </script>
</body>
</html>

输出：

数组是: 100.21199798583984,907.5399780273438,23.649999618530273,14562546941952