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

列印頁面