Javascript 简明教程

JavaScript - The TypedArray Object

What is a TypedArray?

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

A JavaScript TypedArray is an array-like object used to store binary data. Unlike the array, the size of the TypedArray can’t be dynamic and can’t hold the values of the different data types, improving the performance of the TypedArray.

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

A TypedArray is used in audio processing, graphics rendering, networking, etc.

Why TypedArray?

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

In other programming languages like C++, an array can contain data of only one data type, but a JavaScript array is a bit different. It can contain elements of multiple data types. So, JavaScript arrays are less efficient in dealing with binary data and when higher performance is needed.

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

It is one of the reasons that TypedArray is introduced in JavaScript, and it is also called the array buffer. A TypedArray is the best way to handle binary data while maintaining the memory.

TypedArray Objects

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

Here are the types of TypedArray objects available to store the data of the 8, 16, 32, or 64-bit data. You can choose any object to create a TypedArray according to the data you need to store.

Sr. No.

TypedArray

Data Type

Range

Example

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等方法，但支持下列属性和方法。

A TypedArray doesn’t support the methods like push(), pop, etc., but supported properties and methods are listed below.

TypedArray Properties

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

Here is a list of the properties of the TypedArray object along with their description −

Sr.No.

Property & Description

1

Constructor It returns an array buffer constructor.

2

byteLength It returns the byte length of the TypedArray.

3

maxByteLength It returns the maximum byte length to expand the size of the TypedArray.

4

resizable To check whether the TypedArray is resizable.

TypedArray Static Methods

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

Here is a list of the static methods of the TypedArray object along with their description −

Sr.No.

Methods

Description

1

from()

It returns a new Array instance.

2

of()

It returns a new Array instance.

TypedArray Instance Methods

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

Here is a list of the instance methods of the TypedArray object along with their description −

TypedArray instance methods

Sr.No.

Methods

Description

1

at()

It returns an element in the typed array that matches the given index.

2

copyWithin()

It returns a modified TypedArray without changing the length of the original TypedArray.

3

entries()

It returns a new array iterable object.

4

every()

It returns true if all elements in the typed array pass the test implemented by the callback function, and false otherwise.

5

fill()

It returns the modified typed array, that is filled with the specified value.

6

filter()

It returns a new copy of a typed array that includes only the elements that pass the test.

7

find()

It returns the first element is TypedArray that satisfied the provided test function, 'undefined' otherwise.

8

findIndex()

It returns an index of the first element is TypedArray that satisfied the provided test function, '-1' otherwise.

9

findLast()

It returns the last element in the typed array that satisfies the provided testing function, 'undefined' if not found.

10

findLastIndex()

It returns the last element in the typed array that passes the test, -1 if not found.

11

forEach()

It returns none(undefined).

12

includes()

It returns 'true' if searchElement is found in the typed array; 'false' otherwise.

13

indexof()

It returns the first index of the searchElement.

14

join()

It returns a string by joining all the elements of a typed array.

15

Keys()

It returns a new iterable iterator object.

16

lastIndexof()

It returns the last index of the searchElement in a typed array. If the search element is not present, it returns -1.

17

map()

It returns a new typed array by executing the callback function on each element.

18

reduce()

It returns a value that outputs from running the "reducer" callback function to completion over the entire typed array.

19

reduceRight()

It returns a value that results from the reduction.

20

reverse()

It returns the reference of the original typed array in reversed order.

21

set()

It returns none(undefined).

22

slice()

It returns a new typed array containing the extracted elements of the original typed array.

23

some()

It returns true, if atlesat one element in typed array pass the test implemented by provided function; false otherwise.

24

sort()

It returns the reference of the same typed array in sorted order.

25

subarray()

It returns a new TypedArray object.

26

toLocaleString()

It returns a string that represents the elements of the typed array.

27

toReversed()

It returns a new typed array containing the elements in reversed order.

28

toSorted()

It returns a new typed array with the elements sorted in ascending order.

29

toString()

It returns a string that represents the elements of the typed array.

30

values()

It returns a new array iterable object.

31

with()

It returns a new typed array with the element at the index replaced with the specified value.

Examples

Example 1

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

We used the Int8Array to create a TypedArray in the example below. We passed the array containing the multiple elements as an object constructor.

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

In the output, you can see that if any input element is greater than the 8-bit number, the constructor function automatically enforces it to the 8-bit number.

<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 位浮点数。

In the example below, we used the Float32Array() constructor function to create a TypedArray. It is used to store the 32-bit floating point numbers.

此外，您可以像访问或更新普通数组一样访问或更新 TypedArray 元素。

Also, you can access or update TypedArray elements as the normal array.

<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