TypedArray i JavaScript

Denne artikel forklarer TypedArray i JavaScript.

Vi vil forklare i detaljer det grundlæggende koncept for TypedArray, hver type, hvordan de bruges, og specifikke anvendelsestilfælde.

YouTube Video

TypedArray i JavaScript

TypedArray i JavaScript er et objekt til effektiv håndtering af bufferet binære data. TypedArray allokerer og manipulerer hukommelse baseret på specifikke datatyper. I modsætning til almindelige arrays kan TypedArray kun indeholde binære data af fast størrelse, ikke vilkårlige datatyper.

Den grundlæggende struktur af TypedArray

De vigtigste komponenter i en TypedArray er ArrayBuffer og selve TypedArray.

• ArrayBuffer: En buffer af fast størrelse, der allokerer binære data i hukommelsen. Denne buffer er blot et dataområde og kan ikke læses fra eller skrives til direkte.
• TypedArray: Et wrapper-objekt, som anvender en specifik datatypé på bufferen, hvilket muliggør adgang og manipulation af data.

Grundlæggende brugs-eksempel

Følgende er et eksempel på, hvordan man opretter en ArrayBuffer og derefter opretter en TypedArray baseret 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 eksempel oprettes en ArrayBuffer, og derefter oprettes en Uint8Array baseret på denne buffer. Hvert element behandles som et 8-bit usigneret heltal, som kun gemmer værdier inden for det angivne område.

Typer af TypedArray

Der er forskellige typer TypedArray for hver datatypé. De vigtigste er som følger.

Disse TypedArrays er alle hukommelseseffektive og velegnede til håndtering af store datamængder.

Manipulation af TypedArrays

Du kan få adgang til data i en TypedArray ved hjælp af indekser, ligesom i en almindelig array, men flere specielle metoder tilbydes også.

Indstilling af værdier

I en TypedArray kan du tildele flere værdier på én gang ved hjælp af 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 kode bruger set-metoden til at tildele flere værdier på én gang til en Int16Array og viser hvert element i konsollen.

Få en delarray

For at få en del af en TypedArray som en delarray skal du bruge subarray-metoden. Dette refererer til den samme buffer 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 kode henter et bestemt interval af elementer fra en Int16Array ved hjælp af subarray-metoden og viser del-arrayet i konsollen.

Kopiere buffere

Bufferen i en TypedArray kan også kopieres til en anden TypedArray. Ved hjælp af set-metoden kan du kopiere fra en specificeret position.

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 kode kopierer indholdet af en Uint8Array til et andet array ved hjælp af set-metoden og viser det kopierede array i konsollen.

Brug af DataView

Mens en TypedArray håndterer buffere med en fast datatype, er DataView en grænseflade, der gør det muligt at manipulere fleksibelt med binære data med vilkårlige forskydninger og datatyper. Dette gør det muligt at blande forskellige typer i den samme buffer.

 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 kode bruger en DataView til at skrive forskellige datatyper—32-bit heltal og 32-bit kommatal—til den samme buffer og tjekker resultaterne.

• DataView tilbyder større fleksibilitet for dataadgang end TypedArray og er især nyttigt ved arbejde med binære filformater eller netværksprotokoller.

Brugsanvendelser af TypedArray

TypedArray bruges primært til effektiv håndtering af store mængder binære data. Specifikke brugsanvendelser inkluderer følgende.

Billedbehandling

TypedArray bruges ved manipulation af pixelinformation for billeddata. Ved hjælp af Uint8Array kan du holde RGBA-værdierne for hver pixel og udføre billedredigering og -behandling.

 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 kode opretter billeddata med en bredde på 100 og højde på 100 i RGBA-format ved hjælp af en Uint8Array og sætter alle pixels til rød.

Interfacing med WebAssembly

TypedArray bruges til at udveksle binære data mellem JavaScript og WebAssembly. Ved at dele hukommelsesområdet for JavaScript og WebAssembly via ArrayBuffer er hurtig dataudveksling mulig.

Bearbejdning af lyd- og videodata

TypedArray spiller en vigtig rolle i behandlingen af lyd og video. Du kan gemme lyddata-bølgeformer i Float32Array for at udføre afspilning og behandling.

Konklusion

TypedArray er et kraftfuldt værktøj til effektiv håndtering af store mængder binære data. Det er særligt nyttigt i præstationskritiske applikationer som billedbehandling, WebAssembly og behandling af lyd-/videodata. TypedArray har en API, der ligner almindelige arrays, men der er begrænsninger i forhold til hukommelsesbrug og datatyper, så korrekt differentiering i brug er nødvendig.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video