TypedArray w JavaScript

Ten artykuł wyjaśnia TypedArray w JavaScript.

Szczegółowo wyjaśnimy podstawową koncepcję TypedArray, każdy typ, sposób ich użycia oraz konkretne przypadki użycia.

YouTube Video

TypedArray w JavaScript

TypedArray w JavaScript to obiekt umożliwiający efektywne zarządzanie buforowanymi danymi binarnymi. TypedArray przydziela i manipuluje pamięcią w oparciu o określone typy danych. W przeciwieństwie do zwykłych tablic, TypedArray może przechowywać tylko dane binarne o stałym rozmiarze, a nie dowolne typy danych.

Podstawowa struktura TypedArray

Główne komponenty TypedArray to ArrayBuffer i sam TypedArray.

• ArrayBuffer: Bufor o stałym rozmiarze, który przydziela dane binarne w pamięci. Ten bufor to jedynie obszar z danymi, do którego nie można bezpośrednio odczytywać ani zapisywać danych.
• TypedArray: Obiekt opakowujący, który stosuje określony typ danych do bufora, umożliwiając dostęp do danych i ich manipulację.

Podstawowy Przykład Użytkowania

Poniżej znajduje się przykład tworzenia ArrayBuffer, a następnie TypedArray na jego podstawie.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• W tym przykładzie tworzony jest ArrayBuffer, a następnie na jego podstawie Uint8Array. Każdy element jest traktowany jako 8-bitowa liczba całkowita bez znaku, przechowująca wartości tylko w określonym zakresie.

Rodzaje TypedArray

Istnieją różne typy TypedArray dla każdego typu danych. Główne z nich to.

Te TypedArray są wszystkie pamięciooszczędne i skuteczne w obsłudze dużych ilości danych.

Manipulowanie TypedArrays

Dane w TypedArray można uzyskiwać za pomocą indeksów, podobnie jak w zwykłej tablicy, ale dostępne są również specjalne metody.

Ustawianie wartości

W TypedArray można przypisać wiele wartości jednocześnie za pomocą metody set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Ten kod używa metody set, aby przypisać jednocześnie wiele wartości do Int16Array i wyświetla każdy element w konsoli.

Pobieranie podtablicy

Aby uzyskać część TypedArray jako podtablicę, użyj metody subarray. To odnosi się do tego samego bufora co oryginalna TypedArray.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Ten kod pobiera określony zakres elementów z Int16Array za pomocą metody subarray i wyświetla podtablicę w konsoli.

Kopiowanie buforów

Bufor TypedArray można również skopiować do innej TypedArray. Za pomocą metody set można kopiować z określonej pozycji.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Ten kod kopiuje zawartość Uint8Array do innej tablicy za pomocą metody set i wyświetla skopiowaną tablicę w konsoli.

Korzystanie z DataView

Podczas gdy TypedArray obsługuje bufory o stałym typie danych, DataView to interfejs umożliwiający elastyczną manipulację danymi binarnymi z dowolnymi przesunięciami i typami danych. To pozwala mieszać różne typy danych w tym samym buforze.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Ten kod używa DataView, aby zapisywać różne typy danych—32-bitowe liczby całkowite i 32-bitowe liczby zmiennoprzecinkowe—do tego samego bufora i sprawdza wyniki.

• DataView oferuje większą elastyczność dostępu do danych niż TypedArray i jest szczególnie przydatny podczas pracy z plikami w formacie binarnym lub protokołami sieciowymi.

Zastosowania TypedArray

TypedArray jest głównie używany do efektywnej obsługi dużych ilości danych binarnych. Konkretnymi przykładami zastosowań są następujące.

Przetwarzanie obrazów

TypedArray jest używany podczas manipulowania informacjami o pikselach danych obrazu. Korzystając z Uint8Array, przechowujesz wartości RGBA każdego piksela i wykonujesz edycję oraz przetwarzanie obrazu.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Ten kod tworzy dane obrazu o szerokości 100 i wysokości 100 w formacie RGBA za pomocą Uint8Array i ustawia wszystkie piksele na czerwone.

Integracja z WebAssembly

TypedArray jest używany do wymiany danych binarnych między JavaScriptem a WebAssembly. Poprzez współdzielenie przestrzeni pamięci między JavaScriptem a WebAssembly za pomocą ArrayBuffer, możliwa jest szybka wymiana danych.

Przetwarzanie danych audio i wideo

TypedArray odgrywa ważną rolę w przetwarzaniu dźwięku i obrazu wideo. Możesz przechowywać przebiegi danych audio w Float32Array, aby je odtwarzać i przetwarzać.

Wnioski

TypedArray to potężne narzędzie do efektywnego zarządzania dużymi ilościami danych binarnych. Jest szczególnie przydatny w aplikacjach krytycznych pod względem wydajności, takich jak przetwarzanie obrazów, WebAssembly czy przetwarzanie danych audio/wideo. TypedArray ma API podobne do zwykłych tablic, ale istnieją ograniczenia dotyczące użycia pamięci i typów danych, dlatego konieczne jest właściwe rozróżnienie w zastosowaniu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video