TypedArray i JavaScript

Denne artikkelen forklarer TypedArray i JavaScript.

Vi vil forklare i detalj det grunnleggende konseptet med TypedArray, hver type, hvordan de brukes, og spesifikke bruksområder.

YouTube Video

TypedArray i JavaScript

TypedArray i JavaScript er et objekt for effektiv håndtering av buffret binærdata. TypedArray tildeler og manipulerer minne basert på spesifikke datatyper. I motsetning til vanlige array kan TypedArray kun inneholde fast størrelse binærdata, ikke vilkårlige datatyper.

Den grunnleggende strukturen til TypedArray

Hovedkomponentene i en TypedArray er ArrayBuffer og selve TypedArray.

• ArrayBuffer: En buffer med fast størrelse som tildeler binærdata i minnet. Denne bufferen er kun et dataområde og kan ikke leses fra eller skrives til direkte.
• TypedArray: Et innpakningsobjekt som anvender en spesifikk datatype til bufferen for å muliggjøre dataadgang og -manipulering.

Grunnleggende brukseksempel

Følgende er et eksempel på å opprette en ArrayBuffer og deretter opprette en TypedArray basert på den.

 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

• I dette eksempelet opprettes en ArrayBuffer, og deretter lages en Uint8Array basert på denne bufferen. Hvert element behandles som et 8-bits usignert heltall, og lagrer verdier kun innenfor det spesifiserte området.

Typer av TypedArray

Det finnes forskjellige typer TypedArray for hver datatype. De viktigste er som følger.

Disse TypedArray-ene er alle minneeffektive og er effektive for å håndtere store mengder data.

Manipulering av TypedArrays

Du kan få tilgang til data i en TypedArray ved hjelp av indekser, akkurat som i en vanlig array, men flere spesielle metoder tilbys også.

Angi verdier

I en TypedArray kan du tildele flere verdier samtidig ved å bruke set-metoden.

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

• Denne koden bruker set-metoden til å tildele flere verdier samtidig til en Int16Array, og viser hvert element i konsollen.

Hente en underarray

For å få en del av en TypedArray som en underarray, bruk subarray-metoden. Dette refererer til den samme bufferen som den originale 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]

• Denne koden henter et angitt område av elementer fra en Int16Array ved å bruke subarray-metoden og viser subarrayen i konsollen.

Kopiering av buffere

Bufferen til en TypedArray kan også kopieres til en annen TypedArray. Ved å bruke set-metoden kan du kopiere fra en spesifisert posisjon.

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]

• Denne koden kopierer innholdet av en Uint8Array til en annen tabell ved å bruke set-metoden, og viser den kopierte tabellen i konsollen.

Bruke DataView

Mens en TypedArray håndterer buffere med en fast datatype, er DataView et grensesnitt som tillater fleksibel manipulering av binære data med vilkårlige forskyvninger og datatyper. Dette tillater at forskjellige typer kan blandes i den samme bufferen.

 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

• Denne koden bruker en DataView til å skrive ulike typer data—32-bits heltall og 32-bits flyttall—til den samme bufferen og sjekker resultatene.

• DataView tilbyr større fleksibilitet i dataadgang enn TypedArray og er spesielt nyttig når du arbeider med binære filformater eller nettverksprotokoller.

Bruksområder for TypedArray

TypedArray brukes hovedsakelig for effektiv håndtering av store mengder binære data. Spesifikke bruksområder inkluderer følgende.

Bildebehandling

TypedArray brukes når man manipulerer pikselinformasjon i bildedata. Ved å bruke Uint8Array lagres RGBA-verdiene for hver piksel, og bildebehandling og redigering utføres.

 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}

• Denne koden lager bildedata med bredde 100 og høyde 100 i RGBA-format ved å bruke en Uint8Array, og setter alle piksler til rødt.

Samhandling med WebAssembly

TypedArray brukes til å utveksle binærdata mellom JavaScript og WebAssembly. Ved å dele minneområdet til JavaScript og WebAssembly gjennom ArrayBuffer, er rask datautveksling mulig.

Behandling av lyd- og videodata

TypedArray spiller en viktig rolle i behandling av lyd og video. Du kan lagre lyddataens bølgeformer i Float32Array for å utføre avspilling og behandling.

Konklusjon

TypedArray er et kraftig verktøy for effektiv håndtering av store mengder binærdata. Det er spesielt nyttig i ytelseskritiske applikasjoner som bildebehandling, WebAssembly og behandling av lyd-/videodata. TypedArray har et API som ligner på vanlige arrays, men det finnes begrensninger når det gjelder minnebruk og datatyper, så korrekt differensiering i bruk er påkrevd.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video