TypedArray i JavaScript

Den här artikeln förklarar TypedArray i JavaScript.

Vi kommer att förklara i detalj den grundläggande konceptet med TypedArray, varje typ, hur man använder dem och specifika användningsområden.

YouTube Video

TypedArray i JavaScript

TypedArray i JavaScript är ett objekt för att effektivt hantera buffrad binär data. TypedArray allokerar och hanterar minne baserat på specifika datatyper. Till skillnad från vanliga arrayer kan TypedArray endast innehålla binära data med fast storlek, inte godtyckliga datatyper.

Den grundläggande strukturen för TypedArray

Huvudkomponenterna i en TypedArray är ArrayBuffer och själva TypedArray.

• ArrayBuffer: En buffer med fast storlek som allokerar binär data i minnet. Den här bufferten är bara ett dataområde och kan inte läsas från eller skrivas till direkt.
• TypedArray: Ett omslagsobjekt som tillämpar en specifik datatyp på bufferten, vilket möjliggör dataåtkomst och manipulation.

Grundläggande användningsexempel

Följande är ett exempel på att skapa en ArrayBuffer och sedan skapa en TypedArray baserat 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 det här exemplet skapas en ArrayBuffer, och sedan skapas en Uint8Array baserat på den bufferten. Varje element behandlas som ett 8-bitars osignerat heltal som lagrar värden endast inom det angivna intervallet.

Typer av TypedArray

Det finns olika typer av TypedArray för varje datatyp. De viktigaste är följande.

Dessa TypedArrays är alla minneseffektiva och lämpliga för att hantera stora mängder data.

Hantering av TypedArrays

Du kan komma åt data i en TypedArray med hjälp av index, precis som med en vanlig array, men flera speciella metoder tillhandahålls också.

Sätta värden

I en TypedArray kan du tilldela flera värden samtidigt med hjälp av 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

• Den här koden använder metoden set för att tilldela flera värden samtidigt till en Int16Array, och visar varje element i konsolen.

Hämta en delmängd (subarray)

För att hämta en del av en TypedArray som en delmängd, använd metoden subarray. Den här refererar till samma buffer som den ursprungliga 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]

• Den här koden hämtar ett angivet intervall av element från en Int16Array med metoden subarray och visar delarrayen i konsolen.

Kopiera buffrar

Bufferten för en TypedArray kan också kopieras till en annan TypedArray. Med hjälp av set-metoden kan du kopiera från en specifik 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]

• Den här koden kopierar innehållet i en Uint8Array till en annan array med metoden set och visar den kopierade arrayen i konsolen.

Användning av DataView

Medan en TypedArray hanterar buffrar med en fast datatyp, är DataView ett gränssnitt som tillåter flexibel hantering av binär data med godtyckliga offset och datatyper. Detta möjliggör blandning av olika typer i samma 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

• Den här koden använder en DataView för att skriva olika datatyper—32-bitars heltal och 32-bitars flyttal—på samma buffer och kontrollerar resultaten.

• DataView erbjuder större flexibilitet för dataåtkomst än TypedArray och är särskilt användbar för att arbeta med filer i binärt format eller nätverksprotokoll.

Användningsområden för TypedArray

TypedArray används främst för effektiv hantering av stora mängder binär data. Specifika användningsområden inkluderar följande.

Bildbehandling

TypedArray används vid manipulering av pixelinformation i bilddata. Med hjälp av Uint8Array håller du RGBA-värdena för varje pixel och utför bildredigering och bearbetning.

 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}

• Den här koden skapar bilddata med en bredd på 100 och en höjd på 100 i RGBA-format med hjälp av en Uint8Array och sätter alla pixlar till rött.

Gränssnitt med WebAssembly

TypedArray används för att utbyta binärdata mellan JavaScript och WebAssembly. Genom att dela minnesutrymmet mellan JavaScript och WebAssembly via ArrayBuffer är snabb datautbyte möjligt.

Bearbetning av ljud- och videodata

TypedArray spelar en viktig roll i bearbetning av ljud och video. Du kan lagra vågformer för ljuddata i Float32Array för uppspelning och bearbetning.

Slutsats

TypedArray är ett kraftfullt verktyg för att effektivt hantera stora mängder binärdata. Det är särskilt användbart i prestandakritiska applikationer som bildbearbetning, WebAssembly och ljud-/videobearbetning. TypedArray har ett API som liknar vanliga arrayer, men det finns begränsningar kring minnesanvändning och datatyper, så korrekt differentiering i användningen krävs.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video