Javascript 简明教程

JavaScript - The TypedArray Object

What is a TypedArray?

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

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

Why TypedArray?

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

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

TypedArray Objects

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

Sr. No.

TypedArray

Data Type

Range

Example

1

Int8Array

8位二进制补码有符号整型（字节）

-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

-263至263 − 1

new BigInt64Array([-9071954740991n, 9719925474991n])

11

BigUint64Array

Big unsigned integer

0至2^64 - 1

new BigUint64Array([0n, 18446744709551615n])

TypedArray不支持push()、pop等方法，但支持下列属性和方法。

TypedArray Properties

以下是 TypedArray 对象的属性列表及其说明−

Sr.No.

Property & Description

1

Constructor 它返回一个数组缓冲区构造函数。

2

byteLength 它返回 TypedArray 的字节长度。

3

maxByteLength 它返回可扩展 TypedArray 大小的最大字节长度。

4

resizable 检查 TypedArray 是否可调整大小。

TypedArray Static Methods

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

Sr.No.

Methods

Description

1

from()

它返回一个新的 Array 实例。

2

of()

它返回一个新的 Array 实例。

TypedArray Instance Methods

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

TypedArray instance methods

Sr.No.

Methods

Description

1

at()

它返回与给定索引匹配的类型化数组中的元素。

2

copyWithin()

它返回修改后的 TypedArray，而不更改原始 TypedArray 的长度。

3

entries()

它返回一个新的数组可迭代对象。

4

every()

当类型化数组中的所有元素都通过回调函数实现的测试，则返回 true，否则返回 false。

5

fill()

它返回修改后的类型化数组，其中填充了指定的值。

6

filter()

它返回一个类型化数组的新副本，该副本仅包含通过测试的元素。

7

find()

返回满足所提供的测试函数的 TypedArray 中的第一个元素，否则返回“不确定”

8

findIndex()

它返回满足所提供的测试函数的第一个元素的索引，否则返回“-1”。

9

findLast()

它返回满足所提供的测试函数的类型化数组中的最后一个元素，否则返回“不确定”。

10

findLastIndex()

它返回通过测试的最后一个元素，如果没有找到，则返回 -1。

11

forEach()

It returns none(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()

It returns none(undefined).

22

slice()

它返回一个新的类型化数组，其中包含原始类型化数组的提取元素。

23

some()

如果类型化数组中的至少一个元素通过由所提供函数实现的测试，则返回 true；否则返回 false。

24

sort()

它返回按排序顺序排列的相同类型化数组的引用。

25

subarray()

它返回一个新的 TypedArray 对象。

26

toLocaleString()

它返回表示类型化数组元素的字符串。

27

toReversed()

它返回一个新的类型化数组，其中包含按反向顺序排列的元素。

28

toSorted()

它返回一个新的类型化数组，其中的元素按升序排序。

29

toString()

它返回表示类型化数组元素的字符串。

30

values()

它返回一个新的数组可迭代对象。

31

with()

它返回一个新的类型化数组，其中的索引处的元素被替换为指定的值。

Examples

Example 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

Example 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