JavaScript - TypedArray 对象

什么是 TypedArray？

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

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

为什么选择 TypedArray？

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

这是 JavaScript 中引入 TypedArray 的原因之一，它也被称为数组缓冲区。TypedArray 是在维护内存的同时处理二进制数据的最佳方式。

TypedArray 对象

以下是可用于存储 8 位、16 位、32 位或 64 位数据的 TypedArray 对象的类型。您可以根据需要存储的数据选择任何对象来创建 TypedArray。

Sr. No.	TypedArray	数据类型	范围	示例
1	Int8Array	8-bit two's complement Signed integer (byte)	-28 to 127	new Int8Array([92, 17, -100])
2	Uint8Array	8-bit Unsigned integer	0 to 255	new Uint8Array([132, 210, 0])
3	Uint8ClampedArray	8-bit Unsigned integer	0 to 255	new Uint8ClampedArray([90, 17, 70])
4	Int16Array	Short integer	-32768 to 32767	new Int16Array([1000, -2000, 150])
5	Uint16Array	Unsigned short int	0 to 65535	new Uint16Array([50, -6535, 12000])
6	Int32Array	Signed long integer	-2147483648 to 2147483647	new Int32Array([1000000, -2000000, 9876])
7	Uint32Array	Unsigned long integer	0 to 4294967295	new Uint32Array([100, 42967295, 0])
8	Float32Array	Float (7 significant digits)	±1.2x10^-38 to ±3.4x10^38	new Float32Array([3.134, 1.618, -0.5])
9	Float64Array	Double (16 significant digits)	±5.0x10^-324 to ±1.8x10^308	new Float64Array([2.78, -12.35, 99.9])
10	BigInt64Array	Big signed integer	-2^63 to 2^63 − 1	new BigInt64Array([-9071954740991n, 9719925474991n])
11	BigUint64Array	Big unsigned integer	0 to 2^64 - 1	new BigUint64Array([0n, 18446744709551615n])

TypedArray 不支持 push（）、pop 等方法，但支持的属性和方法如下所列。

TypedArray 属性

以下是 TypedArray 对象的属性列表及其描述 -

属性	描述
Constructor	返回一个数组缓冲区构造函数。
byteLength	返回 TypedArray 的字节长度。
maxByteLength	返回最大字节长度以扩展 TypedArray 的大小。
resizable	检查 TypedArray 是否可调整大小。

TypedArray 静态方法

以下是 TypedArray 对象的静态方法列表及其描述 -

方法	描述
from()	返回一个新的 Array 实例。
of()	返回一个新的 Array 实例。

TypedArray 实例方法

以下是 TypedArray 对象的实例方法列表及其描述 -

方法	描述
at()	返回类型化数组中与给定索引匹配的元素。
copyWithin()	返回修改后的 TypedArray，而不更改原始 TypedArray 的长度。
entries()	返回一个新的数组可迭代对象。
every()	如果类型化数组中的所有元素都通过了回调函数实现的测试，则返回 true，否则返回 false。
fill()	返回修改后的类型化数组，该数组填充了指定的值。
filter()	返回类型化数组的新副本，该副本仅包含通过测试的元素。
find()	返回第一个元素是满足提供的测试函数的 TypedArray，否则为 'undefined'。
findIndex()	返回第一个元素的索引是满足提供的测试函数的 TypedArray，否则为 '-1'。
findLast()	返回类型化数组中满足提供的测试函数的最后一个元素，如果未找到，则返回 'undefined' 。
findLastIndex()	返回类型化数组中通过测试的最后一个元素，如果未找到，则返回 -1。
forEach()	返回 none（undefined）。
includes()	如果在类型化数组中找到 searchElement，则返回 'true';否则为 'false'。
indexof()	返回 searchElement 的第一个索引。
join()	通过联接类型化数组的所有元素来返回一个字符串。
Keys()	返回一个新的可迭代器对象。
lastIndexof()	返回类型化数组中 searchElement 的最后一个索引。如果 search 元素不存在，则返回 -1。
map()	通过对每个元素执行回调函数来返回一个新的类型化数组。
reduce()	返回一个值，该值从运行 “reducer” 回调函数到整个类型化数组的完成输出。
reduceRight()	返回一个由缩减产生的值。
reverse()	以相反的顺序返回原始类型化数组的引用。
set()	返回 none（undefined）。
slice()	返回一个新的类型化数组，其中包含原始类型化数组的提取元素。
some()	如果类型化数组中的一个元素通过了提供的函数实现的测试，则返回 true;否则为 false。
sort()	按排序顺序返回相同类型数组的引用。
subarray()	返回一个新的 TypedArray 对象。
toLocaleString()	返回一个 string，该字符串表示类型化数组的元素。
toReversed()	返回一个新的类型化数组，其中包含按相反顺序排列的元素。
toSorted()	返回一个新的类型化数组，其中元素按升序排序。
toString()	返回一个 string，该字符串表示类型化数组的元素。
values()	返回一个新的数组可迭代对象。
with()	返回一个新的类型化数组，其中索引处的元素替换为指定的值。

例子

示例 1

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

在输出中，您可以看到，如果任何 input 元素大于 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

打印本页