TypedArray in JavaScript

Dit artikel legt TypedArray in JavaScript uit.

We zullen het basisconcept van TypedArray, elk type, hoe deze te gebruiken en specifieke gebruiksgevallen in detail uitleggen.

YouTube Video

TypedArray in JavaScript

TypedArray in JavaScript is een object voor het efficiënt verwerken van gebufferde binaire gegevens. TypedArray wijst geheugen toe en manipuleert het op basis van specifieke datatypen. In tegenstelling tot gewone arrays kan een TypedArray alleen binaire gegevens van vaste grootte bevatten, geen willekeurige datatypen.

De Basisstructuur van TypedArray

De belangrijkste componenten van een TypedArray zijn de ArrayBuffer en het TypedArray zelf.

• ArrayBuffer: Een buffer met vaste grootte die binaire gegevens in het geheugen toewijst. Deze buffer is slechts een gegevensgebied en kan niet direct worden gelezen of beschreven.
• TypedArray: Een wrapper-object dat een specifiek datatype toepast op de buffer, waardoor toegang tot en manipulatie van gegevens mogelijk zijn.

Basisgebruik Voorbeeld

Hieronder staat een voorbeeld van het maken van een ArrayBuffer en vervolgens het creëren van een TypedArray op basis daarvan.

 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

• In dit voorbeeld wordt een ArrayBuffer gemaakt en vervolgens een Uint8Array op basis van die buffer. Elk element wordt behandeld als een 8-bit unsigned integer en slaat alleen waarden op binnen het gespecificeerde bereik.

Typen van TypedArray

Er zijn verschillende typen TypedArray voor elk datatype. De belangrijkste zijn als volgt.

Deze TypedArrays zijn allemaal geheugenefficiënt en effectief voor het verwerken van grote hoeveelheden gegevens.

TypedArrays manipuleren

U kunt gegevens in een TypedArray benaderen met indices, net als bij een gewone array, maar er zijn ook verschillende speciale methoden beschikbaar.

Waarden instellen

In een TypedArray kunt u meerdere waarden tegelijk toewijzen met behulp van de methode 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

• Deze code gebruikt de set-methode om meerdere waarden tegelijk toe te wijzen aan een Int16Array en toont elk element in de console.

Een subarray ophalen

Gebruik de methode subarray om een deel van een TypedArray als een subarray te verkrijgen. Dit verwijst naar dezelfde buffer als het originele 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]

• Deze code haalt een opgegeven bereik van elementen op uit een Int16Array met behulp van de subarray-methode en toont de subarray in de console.

Buffers kopiëren

De buffer van een TypedArray kan ook naar een ander TypedArray worden gekopieerd. Met behulp van de methode set kunt u kopiëren vanaf een opgegeven positie.

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]

• Deze code kopieert de inhoud van een Uint8Array naar een andere array met behulp van de set-methode en toont de gekopieerde array in de console.

DataView gebruiken

Hoewel een TypedArray buffers met een vaste gegevenssoort behandelt, is DataView een interface die flexibele manipulatie van binaire gegevens met willekeurige offsets en gegevenssoorten mogelijk maakt. Hierdoor kunnen verschillende soorten in dezelfde buffer worden gemengd.

 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

• Deze code gebruikt een DataView om verschillende soorten data—32-bits gehele getallen en 32-bits drijvende-kommagetallen—naar dezelfde buffer te schrijven en controleert de resultaten.

• DataView biedt meer flexibiliteit bij het benaderen van gegevens dan TypedArray en is vooral nuttig bij het werken met bestanden in binair formaat of netwerkprotocollen.

Gebruikstoepassingen van TypedArray

TypedArray wordt voornamelijk gebruikt voor het efficiënt verwerken van grote hoeveelheden binaire gegevens. Specifieke gebruikstoepassingen zijn onder andere de volgende.

Beeldverwerking

TypedArray wordt gebruikt bij het manipuleren van pixelinformatie van beeldgegevens. Met behulp van Uint8Array houdt u de RGBA-waarden van elke pixel vast en voert u beeldbewerking en -verwerking uit.

 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}

• Deze code maakt afbeeldingsgegevens met een breedte van 100 en een hoogte van 100 in RGBA-formaat met behulp van een Uint8Array, en stelt alle pixels in op rood.

Interfacing met WebAssembly

TypedArray wordt gebruikt voor het uitwisselen van binaire gegevens tussen JavaScript en WebAssembly. Door het delen van de geheugensruimte van JavaScript en WebAssembly via ArrayBuffer, is snelle gegevensuitwisseling mogelijk.

Audiogegevens en videogegevens verwerken

TypedArray speelt een belangrijke rol bij het verwerken van audio en video. U kunt audiogegevensgolfvormen opslaan in Float32Array om af te spelen en te verwerken.

Conclusie

TypedArray is een krachtig hulpmiddel voor het efficiënt verwerken van grote hoeveelheden binaire gegevens. Het is vooral nuttig in prestatiekritische toepassingen zoals beeldverwerking, WebAssembly en het verwerken van audio-/videogegevens. TypedArray heeft een API die lijkt op gewone arrays, maar er zijn beperkingen met betrekking tot geheugengebruik en gegevenstypen, dus een correcte differentiatie in gebruik is vereist.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video