`ArrayBuffer` i JavaScript

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

Vi kommer att förklara allt om ArrayBuffer, från grunderna till dess användning, relaterade typer och praktiska tillämpningar.

YouTube Video

ArrayBuffer i JavaScript

ArrayBuffer i JavaScript är ett objekt för att hantera lågnivå binärdata och är särskilt användbart för att manipulera binärdata i WebAPI:er, filoperationer och nätverkskommunikation.

Vad är ArrayBuffer

ArrayBuffer är en datastruktur för att hantera binärdata med fast längd. Det möjliggör hantering av rå binärdata som inte kan hanteras av vanliga JavaScript-arrayer eller objekt.

ArrayBuffer kan inte direkt manipulera data. Istället läses och skrivs data med hjälp av TypedArray eller DataView baserat på en ArrayBuffer.

ArrayBuffer är särskilt användbart i följande situationer:.

• När man bearbetar binärdata som mottagits från nätverket
• När effektiv datadelning i Web Worker krävs.
• När du utför bildbehandling eller 3D-rendering med Canvas eller WebGL.
• När du hanterar filer (särskilt binära filer).

Skapa en ArrayBuffer

Låt oss börja med hur man skapar en instans av ArrayBuffer. ArrayBuffer allokerar minne i byte-enheter, så du specificerar dess storlek vid skapandet.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• I det här exemplet allokeras en buffert på 16 byte. Den här bufferten innehåller ännu ingen data.

Manipulera data med TypedArray

Du kan inte direkt komma åt en ArrayBuffer, så du använder en TypedArray för att läsa och skriva data. TypedArray erbjuder olika typer av visningar som Int8Array och Float32Array, vilket möjliggör effektiv åtkomst till binärdata.

Exempel med Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array kan lagra data i varje byte, vilket gör att bufferten kan innehålla 8 element. På detta sätt kan du manipulera data effektivt genom att använda olika typer av vyer.

Andra exempel på TypedArray

JavaScript har olika typer av TypedArray. Till exempel, om du vill hantera 32-bitars osignerade heltal, använder du Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array kan lagra data i 4-byte-enheter, så bufferten kan innehålla fyra element. Det är viktigt att välja rätt TypedArray beroende på vilken typ av data du hanterar.

Flexibel datamanipulation med hjälp av DataView

TypedArray kan enbart hantera data av en fast typ, men genom att använda DataView kan du skriva data av vilken typ som helst till valfri plats. Detta är särskilt användbart när du arbetar med buffertar som innehåller blandade datatyper.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Med hjälp av DataView kan du ange en byteförskjutning och läsa eller skriva data av olika typer. Detta är mycket användbart vid hantering av komplexa binära strukturer som nätverksprotokoll eller filformat.

Tänk på byteordning (Endianness)

När du använder DataView måste du också vara uppmärksam på byteordning (endianness). Beroende på datorarkitekturen kan ordningen i vilken data lagras i minnet variera. DataView-metoder har alternativ för att ange byteordning.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Om du inte anger korrekt byteordning kan data tolkas fel i olika miljöer, så det är särskilt viktigt att vara försiktig vid nätverkskommunikation eller filoperationer.

Användningsområden för ArrayBuffer

ArrayBuffer är ett kraftfullt verktyg som ofta används i webbutveckling och webbläsarens API:er. Låt oss titta på några exempel på användningsområden.

Ta emot och bearbeta binär data

Till exempel kan du hämta binär data från en server med hjälp av XMLHttpRequest eller fetch-API och hantera den som en ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• I det här exemplet hämtas bilddata från servern och hanteras som en Uint8Array. På detta sätt kan du bearbeta data som tagits emot från servern med hjälp av ArrayBuffer.

Användning inom WebGL

I WebGL används ArrayBuffer för att effektivt hantera binär data som vertexdata och färgdata.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• I det här exemplet används Float32Array för att definiera vertexkoordinaterna för en rektangel och skicka dem till en WebGL-buffert.

Minneshantering och ArrayBuffer

ArrayBuffer hanterar minnet på bytnivå, vilket gör det mycket effektivt, men du måste också vara försiktig med minneshantering. När du arbetar med stora binära data är det viktigt att korrekt frigöra oanvända ArrayBuffer. Även om JavaScript automatiskt utför skräpsamling kan det orsaka minnesläckor om en ArrayBuffer fortsätter att refereras.

Sammanfattning

ArrayBuffer utgör grunden för bearbetning av binära data i JavaScript. Genom att kombinera TypedArray och DataView är det möjligt att hantera binära data effektivt och flexibelt. De är oumbärliga verktyg inom webbutveckling, särskilt i många situationer som involverar hantering av binära data som nätverkskommunikation och WebGL. Genom att förstå dem korrekt och använda dem på lämpligt sätt kan du förbättra prestanda och effektivitet.

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