JavaScript - TypedArray 对象

什么是 TypedArray？

JavaScript TypedArray 是一种类似数组的对象，用于存储二进制数据。与数组不同，TypedArray 的大小不是动态的，不能保存不同数据类型的值，这提高了 TypedArray 的性能。

TypedArray 用于音频处理、图形渲染、网络等。

为什么使用 TypedArray？

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

这就是 JavaScript 引入 TypedArray 的原因之一，它也称为数组缓冲区。TypedArray 是处理二进制数据同时保持内存效率的最佳方法。

TypedArray 对象

以下是可用于存储 8 位、16 位、32 位或 64 位数据的 TypedArray 对象类型。您可以根据需要存储的数据选择任何对象来创建 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	短整数	-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 对象的属性列表及其说明：

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

TypedArray 静态方法

以下是 TypedArray 对象的静态方法列表及其说明：

序号	方法	说明
1	from()	返回一个新的 Array 实例。
2	of()	返回一个新的 Array 实例。

TypedArray 实例方法

以下是 TypedArray 对象的实例方法列表及其说明：

TypedArray 实例方法

序号	方法	说明
1	at()	返回与给定索引匹配的类型化数组中的元素。
2	copyWithin()	返回修改后的 TypedArray，而不更改原始 TypedArray 的长度。
3	entries()	返回一个新的数组可迭代对象。
4	every()	如果类型化数组中的所有元素都通过回调函数实现的测试，则返回 true；否则返回 false。
5	fill()	它返回修改后的类型化数组，该数组已填充指定值。
6	filter()	它返回类型化数组的新副本，其中仅包含通过测试的元素。
7	find()	它返回TypedArray中第一个满足提供的测试函数的元素，否则返回'undefined'。
8	findIndex()	它返回TypedArray中第一个满足提供的测试函数的元素的索引，否则返回'-1'。
9	findLast()	它返回类型化数组中最后一个满足提供的测试函数的元素，如果未找到则返回'undefined'。
10	findLastIndex()	它返回类型化数组中最后一个通过测试的元素，如果未找到则返回 -1。
11	forEach()	它不返回任何值 (undefined)。
12	includes()	如果在类型化数组中找到 searchElement，则返回 'true'；否则返回 'false'。
13	indexOf()	它返回 searchElement 的第一个索引。
14	join()	它通过连接类型化数组的所有元素来返回一个字符串。
15	keys()	它返回一个新的可迭代迭代器对象。
16	lastIndexOf()	它返回 searchElement 在类型化数组中的最后一个索引。如果搜索元素不存在，则返回 -1。
17	map()	它通过对每个元素执行回调函数来返回一个新的类型化数组。
18	reduce()	它返回一个值，该值是通过在整个类型化数组上完成“reducer”回调函数运行而输出的值。
19	reduceRight()	它返回归约结果的值。
20	reverse()	它返回反转顺序的原始类型化数组的引用。
21	set()	它不返回任何值 (undefined)。
22	slice()	它返回一个新的类型化数组，其中包含原始类型化数组的提取元素。
23	some()	如果类型化数组中至少有一个元素通过提供的函数实现的测试，则返回 true；否则返回 false。
24	sort()	它返回已排序的相同类型化数组的引用。
25	subarray()	它返回一个新的TypedArray对象。
26	toLocaleString()	它返回一个表示类型化数组元素的字符串。
27	toReversed()	它返回一个新的类型化数组，其中包含反转顺序的元素。
28	toSorted()	它返回一个新的类型化数组，其元素按升序排序。
29	toString()	它返回一个表示类型化数组元素的字符串。
30	values()	返回一个新的数组可迭代对象。
31	with()	它返回一个新的类型化数组，其中索引处的元素被替换为指定的值。

示例

示例 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

打印页面